Rank 2
Iron
Iron
Iron
I am trying to create a sortable list with a slider inside it.
Here the example: https://stackblitz.com/edit/react-a3gnj5?file=app/main.jsx
As you can see, the code without the Sortable component works well, but with the Sortable component I cant use the slider and the focus is lost when I try to writte in the input component and the rerender happens.
Any suggestion? The slider and the input must be a 'controller component'.
Thanks!
PD: sorry for the post title, please change it :)
2 Answers, 1 is accepted
Hello, Carlos,
This occurs as the itemUI prop is a function inside render and React re-mounts it each time full recreating the components. This is React-specific and we have no control over that. In these cases, React recommends using React.Contex to pass extra props between component as this is usually the main reason to use functions inside render:
https://reactjs.org/docs/context.html
If the inputs will be used to enter and edit values, we can suggest integrating the Sortable with our Form component which will memorize the Field value and will allow editing without losing the focus:
https://stackblitz.com/edit/react-e8xtys-z7jqfk?file=app/main.jsx
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 2
Iron
Iron
Iron
Hello Stefan,
Thank you for your reply. I will try the solution you propose.
Cheers