How we can clear the old value?

[sajidfrommerqata]

How we can clear the old value without a page refresh?

I'm using react-datalist-input in bootstrap modal. I want to clear the textbox when someone clicks on the close button of the modal.

Screenshot: https://prnt.sc/vn866j

Thanks

[andrelandgraf]

You could probably make use of initialValue.

const YourComponent = ({items}) => {
  const [userSelectedValue, setUserSelectedValue] = useState('');

  const onSelect = useCallback((selectedItem) => {
     setUserSelectedValue(selectedItem.label);
     ...
    }, []);

  const onClose = useCallback(() => {
    setUserSelectedValue('');
    ...
  }, [setUserSelectedValue]);
  
  return (
     <Modal>
         ....
         <DataListInput
           placeholder="Select an option from the drop down menu..."
          items={items}
          onSelect={onSelect}
          initialValue={userSelectedValue}
         />
        ....
    </Modal>
  );
};

Let me know if that works!

[margadtaikhir]

Hi,
I'm trying to clear the input as well,
your suggested solution doesn't work.

maybe we could have ref prop that will have the input ref.

thanks.

[andrelandgraf]

Hi @margadt,

Thanks for your feedback. Yeah, I was testing around with it earlier and I think the cleanest solution would be to introduce an optional value (type string) prop that let's you manage the value of the input field directly.

I would probably deprecate initialValue since it would be confusing to have both (I guess).

Internally I would replace initialValue with value and just do a:

useEffect(() => {
  if (value !== currentInput) {
    setCurrentInput(value)
  }
}, [value, currentInput])

(Currently, initalValue works kinda the same but I am only setting current input if it's empty and initialValue is not to protect the user input when the user is typing).

So in case you need to manipulate the input field value in edge cases, you will have to manage the state of the input value on your own. The package already offers the onSelect and onInput lifecycle methods.

Would that work for you?

[margadtaikhir]

Hi @andrelandgraf ,

Thank you for the fast response,
value prop would be great!

I'm trying to implement clean button like @sajidfrommerqata ,
onSelect/onInput wouldn't be invoked onclick on the clean button.
I guess I'll build my own data-list component for now.

great package though,

[andrelandgraf]

Your clean button would need to setValue('') of the value prop that you pass down to the component. You would probably need to create two callback functions for onSelect and onInput to setValue(currentInput) so that your value is always in sync with the user input.

There is a similar package react-select that makes use of this. You could use that package as well.

[andrelandgraf]

Published as 2.1.1 🎉 Have a look at the updated documentation on how to use the new value prop. It's optional to pass value but if you do, you will have to update the value based on the lifecycle methods like onInput and onSelect. This way you have full control to clear the input field by setting value to empty string.

[margadtaikhir]

Published as 2.1.1 🎉 Have a look at the updated documentation on how to use the new value prop. It's optional to pass value but if you do, you will have to update the value based on the lifecycle methods like onInput and onSelect. This way you have full control to clear the input field by setting value to empty string.

Works great, thanks for the patch.

[sajidfrommerqata]

Thank you for your help.