React IonSelect not rendering pre selected value from state

Question

I'm stuck on the following issue from a project I have taken over. I have a page that has a component with an IonSelect. The options of the select are loaded from data obtained from a server and set in the state whilst being passed as a prop to the select, There is also a user object being loaded that contains a value that should be used as a pre selected value. The IonSelect doesn't show the pre selected text value when screen loads. If I click the IonSelect then the selected value shows. I tried a timeout to see if the render was happening before the data is loaded but it makes no difference. This question here shows the same problem but for an angular app. Is there something similar I can do for react? The previous dev was new to react so I'm trying to refactor some code for efficiency and readability. Is there any advice that can be offered without code being uploaded? Currently, select is in a 5th child component and is using prop drilling to pass the data down.

Update: please see some of the code I've managed to pull for this issue. I have tried using a standard html select and the pre selected value shows fine, so the problem is maybe within the IonSelect element or its wrapper? I have also tried overriding the compare to function of the select as explained in the docs. No joy. I've spent too many hours trying to solve this to no avail.

<IonItem className="statusField">

                        <IonLabel position="stacked">Job Status</IonLabel>
                        <IonSelect 
                            id="jobStatus" 
                            value={props.theJob.jobStatus!.toString()}
                            style={{color: getStatusColour(props.theJob.jobStatus)}} 
                            interface="popover" 
                          
                            onIonChange={(e) => {
                                console.log("the value")
                                 
                                //document.getElementById("jobStatus")!.style.color = getStatusColour(parseInt((document.getElementById("jobStatus") as HTMLInputElement).value));
                                props.switchCancel();
                                props.setDirtyFlag(true);
                            }}>
                            {props.theJob.jobStatus && props.jobStatuses?.map((jobStatus, i) =>{
                                return<IonSelectOption  
                                           key={`Jstat ${i}${jobStatus.recordID}`}
                                    value={jobStatus.recordID.toString()}
                                >      
                                {jobStatus.summaryStatus.toString()}</IonSelectOption>
                            })}
                        </IonSelect>
                    </IonItem>

UPDATE I think I've got it going. I had to do the following but it now renders the pre-selected value on screen refresh and page load.

In the component i added a Ref to the select and updated the selected value using a useEffect with a watch on my prop:

let mySelect = useRef<HTMLIonSelectElement|null>(null)

React.useEffect(()=>{
    mySelect.current!.value = props.theJob.jobStatus?.toString();

},[props.theJob.jobStatus])

In the IonSelect I set the ref and also set the value of the select to the refs current value:

<IonSelect 
                            id="jobStatus" 
                            ref={mySelect}
                            value={mySelect.current?.value} ....

Finally, in the parent component where the data is being fetched. I ensure I await the fetch of the options of the select prior to awaiting the data for the preselected value fetch. Its now working as expected. The UI seems responsive and there doesn't seem to be a noticeable overhead. Hopefully it will help someone if they stumble upon this.

React IonSelect not rendering pre selected value from state

0 Answers0