I have an LWC ("Child_Component") that displays a lightning-record-edit-form which includes a lightning-input-field that references a picklist. Child_Component receives the record id for the record-edit-form its parent ("Parent_Component"), which has a list of records to choose from.
If I select record A in Parent_Component as the first record after the page loads, the picklist value in Child_Component displays as such:
This is the result that I want, as it reflects the record's field value.
If I select record B in Parent_Component as the first record after the page loads, the picklist value in Child_Component displays this:
This also accurately reflects the record's value.
However, if I select record B in Parent_Component first, then change the selected record to record A (without doing a web-page refresh in-between), the picklist value for record A is as follows:
Other fields are updated as expected. I've confirmed that both the record Id and record type Id are being populated correctly from Parent_Component.
Does anyone know what might be causing this picklist value to fail to update?
Child_Component (The code listed is significantly truncated, additional code can be provided on request)
HTML
<lightning-record-edit-form record-id={recordId} record-type-id={recordTypeId} object-api-name="Object_API_Name__c">
<lightning-input-field variant="label-stacked" field-name="Approval_Response__c"></lightning-input-field>
</lightning-record-edit-form>
JS
import { LightningElement, api, track, wire } from "lwc";
export default class Child_Component extends LightningElement {
@api recordId;
@api recordTypeId;
}