valueTemplate not working when re-render?

[Steffen Harbich]

Hello,

see the following example: https://stackblitz.com/edit/repro-syncfusion-react-drop-down-value-template?file=index.js

I try to use a dropdown list with valueTemplate but when I select an item it is not appearing as selected. Please remove the

change={(e) => {setState(e.value)}}

in the example to see that it is working when not re-rendered.

My goals:

- custom value template (number with some CSS background color applied)

- store value in state

- rerender correctly

Regards,

Steffen

[Ponmani Murugaiyan]

Hi Steffen,      

  

Thanks for contacting Syncfusion support. 

The cause for the reported issue is “While the state changes, the component and the template renders back”. Thus, the react will not allow multiple mounting at the same time. In this case, React renders the template as an external component and delays the component re-rendering to compile the template. By setting the delayUpdate property to true, the component renders back after the template compilation is done.   

Now, you can able achieve your reported goals after apply the below changes in your application. Please find the modified sample below for reference. 

<DropDownListComponent 

    delayUpdate='true' 

    dataSource={[{ text: 'Item 1', value: 1}, { text: 'Item 2', value: 2}, { text: 'Item 3', value: 3}]} 

    fields={{ text: "text", value: "value" }} 

    value={state} 

    valueTemplate={(x) => ( 

        <div className="my-value-style">{x.value}</div> 

    )} 

    change={(e) => {setState(e.value)}} 

/> 

Output: 

 

Sample: https://stackblitz.com/edit/repro-syncfusion-react-drop-down-value-template-c5ntji?file=index.js  

Kindly check with the above sample meets your requirement. Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Steffen Harbich]

Thanks, that helped.

[Ponmani Murugaiyan]

Hi Steffen, 

Thanks for the update. 

We are glad to hear that the provided suggestion helped you in achieving your requirement. Please get back us if you need further assistance. 

Regards, 

Ponmani M