ref.current.clearValue() triggering reducer action

[Sutar210599]

Hi all,

I have been learning react (and next.js) for the past 3 months or so. I am currently building an e-commerce site which uses react-select and useReducer() for sorting and filtering of products ( price :low to high, price : high to low etc). I am referencing react-select with ref so that the user can reset it .

I am attaching a sample representative code below:

reducer function :

function reducer(state, action) {
  let filterSortarr = [];
  console.log(action);
  switch (action.type) {
    case p_asc:
      filterSortarr = [...state];
      filterSortarr.sort((x, y) => x.price - y.price);
      return filterSortarr;

     default :    
    
    return state 
  }
}

app.js :

function App() {
  const [sortedProducts, dispatch] = useReducer(reducer, [
    { price: 1244 },
    { price: 5455 },
  ]);
  const selectOptions = [
    { value: "p_desc", label: "Price : High to low" },
    { value: "p_asc", label: "Price : Low to High" },
    { value: "new", label: "Newest First" },
  ];
  const selectRef = useRef();
  return (
    <>
      <div>
        <Select
          classNames={{
            control: () => ""
            placeholder: () => "",
            /* bg-[#e5e5e5] */
            menu: () =>
              "",
            menuList: () => " ",
            option: () => "",
      
          }}
          unstyled
          placeholder="Sort"
          isSearchable={false}
          options={selectOptions}
          ref={selectRef}
          onChange={() => {
            dispatch({ type: "any_action" });
          }}
        />
      </div>
      <button
        style={{ marginTop: "30px" }}
        onClick={() => selectRef.current.clearValue()}
      >
        Clear Select Ref
      </button>
    </>
  );
}

In the above sample code , when selectRef.current.clearValue() is triggered, it also triggers a reducer action of type("any action").

In the actual code, I am passing value.value ,

onChange={(value) => { dispatch({ type: value?.value });  // value.value => p_asc, p_desc new

In this case selectRef.current.clearValue() triggers an undefined action of reducer. I have managed to mitigate this behavior by using default case in reducer which returns the state .

Is this behavior normal? Or there's an issue is my code?

Thanks in advance

[Sutar210599]

When react-select is reset, onChange() is triggered with a null value which causes the undefined action.