react-redux-toastr: text input is blurred when the toast shows up

Question

I using library react-redux-toastr for our project. This library works great, except this case: codesandbox:

import React from "react";
import { useCallback } from "react";
import debounce from "lodash/debounce";
import { toastr } from "react-redux-toastr";

export default function Input({ value, onChange }) {
  const toast = useCallback(
    debounce(() => {
      toastr.error("Interupt your typing", "Sorry, I blur your text input");
    }, 500)
  );

  const setValue = e => {
    onChange(e.target.value);
    toast();
  };

  return (
    <input
      style={{ width: 500 }}
      type="text"
      value={value}
      onChange={setValue}
    />
  );
}

Basically, we want to let user keep typing in, and debouncedly call some API to update the input to database. Everything an API call is successful, show the toast. However, whenever the toast is displayed, the text input is unfocused.

in the CodeSandbox demo, you can try to type in anything, and see what the problem is.

Thanks.

Answer 1

Your problem was solved here https://github.com/diegoddox/react-redux-toastr/issues/270.

You should just add option to your toastr { disableCloseButtonFocus: true}.

 toastr.error(
      "Interupt your typing",`enter code here`
      "Now I don't blur your text input",
      { disableCloseButtonFocus: true}
);