react-native-rich-editor icon indicating copy to clipboard operation
react-native-rich-editor copied to clipboard

Keyboard not closing when focusing on an outside input

Open Lastofthefirst opened this issue 2 years ago • 3 comments

I have a dropdown input on the same view as the rich text editor.

  1. I select the rich text editor. The keyboard appears.
  2. I tap the drowndown input, the keyboard remains and the dropdown menu appears behind the keyboard.

How can I blur the editor properly when I select the dropdown?

Thanks for the library.

Lastofthefirst avatar Aug 31 '22 19:08 Lastofthefirst

Any luck on this?

sujathasperi2022 avatar Mar 30 '23 16:03 sujathasperi2022

for future readers, there is a workaround to do in this case:

you can wrapper your page with a TouchableWithoutFeedback, and verifying these two props _focus and _keyOpen to dismiss the keyboard, something like this:

...
const ref = useRef(null);

return (
  <TouchableWithoutFeedback onPress={() => {
      if (ref.current?._focus && ref.current?._keyOpen) {
        ref.current?.blurContentEditor();
      }
  }}>
    ...
    <RichEditor ref={ref} />
    ...
  </TouchableWithoutFeedback>
)
...

btw, my lib version is 1.8.8

johelder avatar Apr 19 '23 14:04 johelder

image

You can also add keyboard handling buttons in the toolbar, in addition to using blurContentEditor

stulip avatar Apr 20 '23 11:04 stulip