Sortable with editable fields remounted.

2 Answers 164 Views
NumericTextBox Slider Sortable
Carlos
Top achievements
Rank 2
Iron
Iron
Iron
Carlos asked on 02 Jun 2021, 02:47 PM | edited on 02 Jun 2021, 02:48 PM

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

Sort by
0
Stefan
Telerik team
answered on 03 Jun 2021, 05:36 AM

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/.

0
Carlos
Top achievements
Rank 2
Iron
Iron
Iron
answered on 03 Jun 2021, 08:11 AM

Hello Stefan,

Thank you for your reply. I will try the solution you propose.

Cheers

Tags
NumericTextBox Slider Sortable
Asked by
Carlos
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Stefan
Telerik team
Carlos
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or