React rsuite reset select box value

Question

I have rsuite SelectBox, I want to reset its value from outside. when I set it to null or undefined or empty string, it doesnt work.
I read the source code, I get the felling that it is by design, only when you use it as part of a form. but this complicate things. Do you see any possible way to reset the combo value without creating a form?
https://codesandbox.io/s/select-picker-types-forked-ivjn8?file=/src/App.tsx:164-477

export default function App() {
  const [value, setValue] = useState<string | undefined>();

  return (
    <>
      <SelectPicker
        data={[{ label: "test", value: "test" }]}
        value={value}
        onChange={setValue}
      />
      <button onClick={() => setValue("")}>reset</button>
    </>
  );
}

Thanks

score 3 · Answer 1 · answered Feb 23 '22 at 17:57

You can use the defaultValue prop to set the initial value of the SelectPicker.

<SelectPicker
        data={[{ label: "test", value: "test" }]}
        defaultValue={value}
        onChange={setValue}
      />

However in my experience this will not update if defaultValue is changed externally. For that you will need to do as the other answer by MWO suggests and force the component to remount.

You can do this quite simply by just changing the key prop which forces React to create a new component instance. Set the key prop to your value and it will remount when it changes.

<SelectPicker
        key={value}
        data={[{ label: "test", value: "test" }]}
        defaultValue={value}
        onChange={setValue}
      />

Thanks. can you please fork my code with your exampple? https://codesandbox.io/s/select-picker-types-forked-ivjn8?file=/src/App.tsx:164-477 thanks — SexyMF, Feb 24 '22 at 09:26

MWO · Answer 2 · 2022-02-06T19:09:08.483

I know it's not so sweet and I have no idea what props this one takes, but you could unmount/mount it completely on button click.

import { useState, useEffect } from "react";
import { SelectPicker, Button } from "rsuite";
import "./styles.css";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [value, setValue] = useState<string | undefined>("");
  const [down, setDown] = useState(false);

  useEffect(() => {
    setValue("");
    console.log(down);
  }, [down]);

  return (
    <>
      {!down ? (
        <SelectPicker
          data={[{ label: "test", value: "test" }]}
          value={value}
          onChange={setValue}
        />
      ) : (
        <SelectPicker value={""} />
      )}
      <br />
      <br />
      <button
        onMouseUp={() => setDown(false)}
        onMouseDown={() => setDown(true)}
      >
        reset
      </button>
    </>
  );
}

Nice idea, ill wait for more answers... thanks – SexyMF Feb 06 '22 at 19:19 — SexyMF, Feb 06 '22 at 19:19

mediaguru · Answer 3 · 2023-02-15T18:32:53.320

What I did to achieve clearing the selected values externally (I'm triggering this when a separate CheckPicker is selected), is to set the SelectPicker value, and reset it when I want to clear the selected values. I'm also externally resetting data in the CheckPicker when the SelectPicker is open via onOpen={resetFilteredData}.

   const [selectPickerValue, setSelecPickerValue]=useState([]);
   
   // use onSelect to fire a function that sets the picker value
   const tableFilter = (a) => {
        setSelectPickerValue(a);
   }

   // this is being invoked from my CheckPicker onOpen
   const resetPeople = () => {
        setSelecPickerValue([]);
   }
     <SelectPicker
       label="People"
       data={people} 
       labelKey="name" 
       valueKey="id" 
       onSelect={tableFilter}
       onClean={resetTable}
       className="mb-3 select-picker"
       onOpen={resetFilteredData}
       value={selectPickerValue}
     />

React rsuite reset select box value

3 Answers3