Merge remote-tracking branch 'origin/master' into dev/5.0.x

packages/app/src/components/PageEditor/LinkEditModal.jsx

@@ -292,7 +292,6 @@ class LinkEditModal extends React.PureComponent {
                 inputName="link"
                 placeholder={t('link_edit.placeholder_of_link_input')}
                 keywordOnInit={this.state.linkInputValue}
-                behaviorOfResetBtn="clear"
                 autoFocus
               />
               <div className="d-none d-sm-block input-group-append">

packages/app/src/components/PagePathAutoComplete.jsx

@@ -41,7 +41,6 @@ const PagePathAutoComplete = (props) => {
       onChange={inputChangeHandler}
       onInputChange={props.onInputChange}
       inputName="new_path"
-      behaviorOfResetBtn="clear"
       placeholder="Input page path"
       keywordOnInit={getKeywordOnInit(initializedPath)}
       autoFocus={props.autoFocus}

packages/app/src/components/SearchTypeahead.tsx

@@ -1,6 +1,6 @@
 import React, {
   FC, ForwardRefRenderFunction, forwardRef, useImperativeHandle,
-  KeyboardEvent, useCallback, useRef, useState,
+  KeyboardEvent, useCallback, useRef, useState, MouseEvent,
 } from 'react';
 
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
@@ -15,15 +15,12 @@ import { IPageSearchResultData, IFormattedSearchResult } from '~/interfaces/sear
 
 type ResetFormButtonProps = {
   keywordOnInit: string,
-  behaviorOfResetBtn: 'restore' | 'clear',
   input: string,
-  onReset: () => void,
+  onReset: (e: MouseEvent<HTMLButtonElement>) => void,
 }
 
 const ResetFormButton: FC<ResetFormButtonProps> = (props: ResetFormButtonProps) => {
-  const isClearBtn = props.behaviorOfResetBtn === 'clear';
-  const initialKeyword = isClearBtn ? '' : props.keywordOnInit;
-  const isHidden = props.input === initialKeyword;
+  const isHidden = props.input.length === 0;
 
   return isHidden ? (
     <span />
@@ -43,7 +40,6 @@ type Props = TypeaheadProps & {
   keywordOnInit?: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   helpElement?: any,
-  behaviorOfResetBtn?: 'restore' | 'clear',
 };
 
 // see https://github.com/ericgio/react-bootstrap-typeahead/issues/266#issuecomment-414987723
@@ -58,9 +54,8 @@ type TypeaheadInstanceFactory = {
 
 const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Props, ref) => {
   const {
-    keywordOnInit,
     onSearchSuccess, onSearchError, onInputChange, onSubmit,
-    emptyLabel, helpElement,
+    emptyLabel, helpElement, keywordOnInit,
   } = props;
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -72,18 +67,18 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
 
   const typeaheadRef = useRef<TypeaheadInstanceFactory>(null);
 
+  const focusToTypeahead = () => {
+    const instance = typeaheadRef.current?.getInstance();
+    if (instance != null) {
+      instance.focus();
+    }
+  };
 
   // publish focus()
   useImperativeHandle(ref, () => ({
-    focus() {
-      const instance = typeaheadRef.current?.getInstance();
-      if (instance != null) {
-        instance.focus();
-      }
-    },
+    focus: focusToTypeahead,
   }));
 
-
   const changeKeyword = (text: string | undefined) => {
     const instance = typeaheadRef.current?.getInstance();
     if (instance != null) {
@@ -92,12 +87,12 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
     }
   };
 
-  const restoreInitialData = () => {
-    changeKeyword(keywordOnInit);
-  };
+  const resetForm = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
 
-  const clearKeyword = () => {
+    setInput('');
     changeKeyword('');
+    focusToTypeahead();
   };
 
   /**
@@ -177,8 +172,8 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
     return false;
   };
 
-  const defaultSelected = (props.keywordOnInit !== '')
-    ? [{ path: props.keywordOnInit }]
+  const defaultSelected = (keywordOnInit !== '')
+    ? [{ path: keywordOnInit }]
     : [];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const inputProps: any = { autoComplete: 'off' };
@@ -186,9 +181,6 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
     inputProps.name = props.inputName;
   }
 
-  const isClearBtn = props.behaviorOfResetBtn === 'clear';
-  const resetForm = isClearBtn ? clearKeyword : restoreInitialData;
-
   const renderMenuItemChildren = (option: IPageSearchResultData) => {
     const { pageData } = option;
     return (
@@ -228,7 +220,6 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         keywordOnInit={props.keywordOnInit!}
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        behaviorOfResetBtn={props.behaviorOfResetBtn!}
         input={input}
         onReset={resetForm}
       />
@@ -241,7 +232,6 @@ const ForwardedSearchTypeahead = forwardRef(SearchTypeahead);
 ForwardedSearchTypeahead.defaultProps = {
   placeholder: '',
   keywordOnInit: '',
-  behaviorOfResetBtn: 'restore',
   autoFocus: false,
 };