Text input is blurred when the toast shows up

[agongdai]

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. Every time after 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.

[agongdai]

I tried react-toastify and it works as expected: https://codesandbox.io/s/redux-example-v603c

[diegoddox]

Thanks @agongdai will take a look ASAP.

[geraintdong]

may I know what is the progress of this bug? We're struggling with this bug & need to switch to the old jquery-based plugin to work around

[diegoddox]

This should be fixed by now, just pass disableCloseButtonFocus in the toastr options and it should work. let me know if does
ex:

toastr.success('In the beginning was the word', {
  ...otherOptions,
  disableCloseButtonFocus: true // here you go.
});

[diegoddox]

Will close but feel free to re-open if needed.

[de83c78d1f]

@diegoddox actually there is a problem with those focuses still. if i have 2+ toasts, their autofocus propagate from closed one to remaining. #257.

[goxr3plus]

I am using latest version https://github.com/diegoddox/react-redux-toastr/releases/tag/v7.6.0

And the property

toastr.success('In the beginning was the word', {
...otherOptions,
disableCloseButtonFocus: true // here you go.
});

doesn't work anymore did it change ?

When the toaster appears it still takes the focus from the TextInput.

@diegoddox

[zarv1k]

@goxr3plus actually the latest version is 7.6.5 - https://github.com/diegoddox/react-redux-toastr/releases/tag/v7.6.5

[goxr3plus]

@zarv1k

just tested again with 7.6.5 and Chrome 92

toastr.success(title, message, { disableCloseButtonFocus: true } )

issue is still the same when toaster appears it stills the focus from Text Input and makes it blur.

Am i using wrong options ? The property disableCloseButtonFocus doesn't work anymore ?

[diegoddox]

conversation is now on #270