0

I am trying to update the value of a RSuite TagInput programmatically to assist the user in inputting more complex values through an interface. However, no matter what I try it seems the TagInput will only update when the user interacts with it directly. The official documentation does not mention any way for this component to be updated with code. As well, setting the value property of the TagInput does not appear to do anything.

I have noticed that the TagInput has it's value property labeled as controlled. However, other components like the RSuite Input also have their value labeled as controlled, but they are updatable with code.

Is there any way to update the TagInput using JavaScript?

Marcus Der
  • 5
  • 4

1 Answers1

0

Values that you want to set for TagInput, have to be passed inside the defaultValue prop (instead of the value prop) of the TagInput component and the value which you will pass should be in ARRAY format. And add a key prop with a unique value (which should change on every render) then the value of the TagInput component will get updated on every component re-render.

<TagInput key={`${Math.floor((Math.random() * 1000))}-somename`} defaultValue={['value1','value2']}/>

You can see this rsuite official doc:

enter image description here

Saeed Zhiany
  • 2,051
  • 9
  • 30
  • 41
Sarath Gvnd
  • 66
  • 1
  • 3
  • I did try this, and it works, but unfortunately this does not refresh the component when I update the default value. I need to enter in some garbage data for it to re-render. I ended up doing a wacky workaround to refresh the component by using a for loop to sort of trick react into re-rendering it. Maybe there's a better way? – Marcus Der May 27 '22 at 01:01
  • I have edited my answer, check once by trying that instead of loops and all. Loops leads to performance issues as those are CPU intensive tasks. – Sarath Gvnd May 28 '22 at 03:21
  • Thanks! I never thought about changing the key. I didn't use random and floor since that has the chance of rolling the same number twice, I just turned the value into a string. Works! In my specific case the loop probably had negligible impact since it ran only one iteration to get react to refresh the component, but this is a much cleaner solution. – Marcus Der May 31 '22 at 22:41
  • @MarcusDer Kool!! Ofcourse you should use the random value as string only, that's the reason I have kept TEMPLATE LITERALS in key prop. – Sarath Gvnd Jun 03 '22 at 03:10