fix(date-inputs): header focus problem fix (#1160)

* fix(date-inputs): header focus problem fix

* chore: throw away old approach

* chore: simplify RTL

* chore: add visual test

* chore: force build on ci

Author: montezume

src/components/inputs/date-input/date-input-open.visualroute.js

@@ -8,9 +8,10 @@ export const routePath = '/date-input-open';
 
 export const component = () => (
   <Suite>
-    <Spec label="minimal">
+    <Spec label="minimal" propsToList={['value', 'horizontalConstraint']}>
       <DateInput
         id="date-input"
+        data-testid="date-input"
         value={value}
         onChange={() => {}}
         horizontalConstraint="m"

src/components/inputs/date-input/date-input.story.js

@@ -18,14 +18,24 @@ class DateInputStory extends React.Component {
     this.setState({ value: event.target.value });
   };
 
+  handleFocus = event => {
+    action('onFocus')(event);
+  };
+
+  handleBlur = event => {
+    action('onBlur')(event);
+  };
+
   render() {
     const placeholder = text('placeholder', '');
     return (
       <Section>
         <div>
           <DateInput
             value={this.state.value}
+            onBlur={this.handleBlur}
             onChange={this.handleChange}
+            onFocus={this.handleFocus}
             horizontalConstraint={select(
               'horizontalConstraint',
               ['m', 'l', 'xl', 'scale'],

src/components/inputs/date-input/date-input.visualspec.js

@@ -1,4 +1,7 @@
 import { percySnapshot } from '@percy/puppeteer';
+import { getDocument, queries, wait } from 'pptr-testing-library';
+
+const { getByLabelText, getByTestId, getByText } = queries;
 
 describe('DateInput', () => {
   it('Default', async () => {
@@ -11,5 +14,21 @@ describe('DateInput', () => {
     await page.click('#date-input');
     await expect(page).toMatch('November');
     await percySnapshot(page, 'DateInput - open');
+
+    const doc = await getDocument(page);
+    const input = await getByTestId(doc, 'date-input');
+
+    const prevMonthButton = await getByLabelText(doc, 'show prev month');
+    await prevMonthButton.click();
+
+    await wait(() => getByText(doc, 'October'));
+    // our input should still be focused even though we clicked a header button
+
+    await input.press('Backspace');
+    await input.press('Backspace');
+    await input.press('Backspace');
+    await input.press('Backspace');
+    await input.type('2017');
+    await wait(() => getByText(doc, '2017'));
   });
 });

src/components/inputs/date-time-input/date-time-input.story.js

@@ -18,6 +18,11 @@ class DateTimeInputStory extends React.Component {
     this.setState({ value: event.target.value });
   };
 
+  onBlur = event => {
+    action('onBlur')(event);
+  };
+  onFocus = event => action('onFocus')(event);
+
   render() {
     const placeholder = text('placeholder', '');
     return (
@@ -47,6 +52,8 @@ class DateTimeInputStory extends React.Component {
           isDisabled={boolean('isDisabled', false)}
           hasError={boolean('hasError', false)}
           hasWarning={boolean('hasWarning', false)}
+          onBlur={this.onBlur}
+          onFocus={this.onFocus}
         />
       </Section>
     );

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

@@ -63,17 +63,6 @@ class RichTextInput extends React.PureComponent {
   // for calling our passed onBlur handler
   // https://github.com/ianstormtaylor/slate/issues/2434
   onBlur = (event, editor, next) => {
-    // we don't call next() if it's a button to stop our input from losing
-    // slate focus
-    if (
-      event.relatedTarget &&
-      event.relatedTarget.getAttribute('data-button-type') ===
-        'rich-text-button'
-    ) {
-      event.preventDefault();
-      return;
-    }
-
     next();
 
     if (this.props.onBlur) {

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

@@ -69,18 +69,6 @@ class RichTextInput extends React.PureComponent {
   // for calling our passed onBlur handler
   // https://github.com/ianstormtaylor/slate/issues/2434
   onBlur = (event, editor, next) => {
-    // we don't call next() if it's a button to stop our input from losing
-    // slate focus
-
-    if (
-      event.relatedTarget &&
-      event.relatedTarget.getAttribute('data-button-type') ===
-        'rich-text-button'
-    ) {
-      event.preventDefault();
-      return;
-    }
-
     next();
 
     if (this.props.onBlur) {
@@ -95,16 +83,6 @@ class RichTextInput extends React.PureComponent {
   };
 
   onFocus = (event, editor, next) => {
-    // we don't call next() if it's from the toolbar
-    if (
-      event.relatedTarget &&
-      event.relatedTarget.getAttribute('data-button-type') ===
-        'rich-text-button'
-    ) {
-      event.preventDefault();
-      return;
-    }
-
     next();
     if (this.props.onFocus) {
       const fakeEvent = {

src/components/internals/calendar-header/calendar-header.js

@@ -17,8 +17,16 @@ const WrapperComponent = styled.div`
 
 const CalendarHeader = props => {
   const intl = useIntl();
+  // https://codepen.io/mudassir0909/pen/eIHqB
+
+  // we prevent all our defined onClicks inside of the CalendarHeader
+  // from blurring our input.
+  const onMouseDown = React.useCallback(event => {
+    event.preventDefault();
+  }, []);
   return (
     <div
+      onMouseDown={onMouseDown}
       css={css`
         display: flex;
         padding: 10px 2% 6px;

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

@@ -19,7 +19,6 @@ const RichTextBodyButton = props => {
       {...restOfProps}
       type="button"
       tabIndex={-1}
-      data-button-type="rich-text-button"
       aria-disabled={props.isDisabled}
       disabled={props.isDisabled}
       aria-label={props.label}

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

@@ -252,19 +252,13 @@ 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]);
+  // https://codepen.io/mudassir0909/pen/eIHqB
+
+  // we prevent all our defined onClicks inside of the CalendarHeader
+  // from blurring our input.
+  const onToolbarMouseDown = React.useCallback(event => {
+    event.preventDefault();
+  }, []);
 
   return (
     <Container
@@ -274,7 +268,7 @@ const RichTextEditorBody = React.forwardRef((props, ref) => {
       isReadOnly={props.isReadOnly}
       isDisabled={props.isDisabled}
     >
-      <Toolbar onClick={onToolbarClick}>
+      <Toolbar onMouseDown={onToolbarMouseDown}>
         <ToolbarMainControls>
           <Dropdown
             label={intl.formatMessage(messages.styleDropdownLabel)}