fix(rich-text-input): dropdown focus bug (#1145)

* fix(rich-text-input): dropdown focus bug

* chore: force build

* chore: update comment

Author: montezume

src/components/inputs/rich-text-input/rich-text-input.visualspec.js

@@ -4,6 +4,12 @@ import { getDocument, queries, wait } from 'pptr-testing-library';
 const { getByLabelText, getByText } = queries;
 
 describe('RichTextInput', () => {
+  const blur = async element => {
+    // eslint-disable-next-line no-shadow
+    await page.evaluate(element => {
+      element.blur();
+    }, element);
+  };
   const selectAllText = async input => {
     // eslint-disable-next-line no-shadow
     await page.evaluate(input => {
@@ -244,6 +250,9 @@ describe('RichTextInput', () => {
 
     // next, open the Style menu
 
+    // blur input first to test that editor focus works correctly
+    await blur(input);
+
     const styleMenuButton = await getByLabelText(doc, 'Style');
     await styleMenuButton.click();
 
@@ -285,6 +294,9 @@ describe('RichTextInput', () => {
 
     // now change back to paragraph (the default)
 
+    // blur input first to test that editor focus works correctly
+    await blur(input);
+
     // open style menu again
     await styleMenuButton.click();
 

src/components/internals/rich-text-body/rich-text-body.js

@@ -252,6 +252,20 @@ const RichTextEditorBody = React.forwardRef((props, ref) => {
     );
   }
 
+  const { focus } = props.editor;
+
+  const onToolbarClick = React.useCallback(() => {
+    // if clicking on a dropdown, we need to both focus the RichTextInput
+    // and open the dropdown.
+    // if we don't use setTimeout, our dropdown opening will be hijacked by the
+    // editors rerendering. (a so called `race condition`)
+    // the reason we keep this here, is because any onClick from our dropdown or our mark buttons
+    // will propogate to here.
+    if (!props.editor.value.selection.isFocused) {
+      setTimeout(focus, 0);
+    }
+  }, [props.editor.value.selection.isFocused, focus]);
+
   return (
     <Container
       css={props.styles.container}
@@ -260,13 +274,7 @@ const RichTextEditorBody = React.forwardRef((props, ref) => {
       isReadOnly={props.isReadOnly}
       isDisabled={props.isDisabled}
     >
-      <Toolbar
-        onClick={() => {
-          if (!props.editor.value.selection.isFocused) {
-            props.editor.focus();
-          }
-        }}
-      >
+      <Toolbar onClick={onToolbarClick}>
         <ToolbarMainControls>
           <Dropdown
             label={intl.formatMessage(messages.styleDropdownLabel)}