TagBuilder is really slow in controlled mode.

[guiherzog]

Bug Report

Prerequisites

• Can you reproduce the problem in a MWE?
• Are you running the latest version?
• Did you check the FAQs to see if that helps you?
• Are you reporting to the correct repository?
• Did you perform a search in the issues?

For more information, see the CONTRIBUTING guide.

Versions

Version 0.8.1

Description

Using TagBuilder in controlled mode, makes it really slow to react to user typing.

Steps to Reproduce

1. Create a TagBuilder component on KitchenSink.
2. Change it to be use in controlled mode.
3. Try type something fast.

Expected behavior:
It would show the input a soon as I type.

Actual behavior:
It slugs to show the char I just pressed.

Environment details:

Tested on macOS Mojave 10.14.6
And Chrome Version 76.0.3809.132

[ZEISSLaurinAgostini]

I'm not sure if I understand this correctly but in controlled mode, you shouldn't be able to type something.
In fact, you can't do it as you may test on the second example at https://precise-ui.io/#/Components/TagBuilder.

[guiherzog]

Yes, you should. The only difference would be that the state (value) of the component would be controlled by its parent. Then, after I type something, a onChange call should be triggered and I can change the state of the component on its parent.

All other components behave normally when using in controlled mode. But this one lags a lot when typing anything and changing the state.

[Saladinek]

I am unable to reproduce laggy behaviour of TagBuilder described in the issue. Code used in0 KitchenSink:

const { TagBuilder, Button } = require('precise-ui');

const MyTagBuilder = () => {

const [input, setInput] = React.useState('');
const [value, setValue] = React.useState([]);

const onInputChange = ({ value }) => {
setInput(value);
};

const addValue = (input) => {
setValue([...value, input]);
setInput('');
};

const deleteValue = ({ value }) => {
setValue(value)
};

return (
	<>
    	<TagBuilder value={value} inputValue={input} onInput={onInputChange} onChange={deleteValue} />
        <Button onClick={() => addValue(input)} >Add</Button>
    </>
 )

}

Perhaps the issue has been fixed in the progress already?