Bug 1547821 - Sync 133 - Don't manage focus via JavaScript r=jlast
authorSorin Davidoi <sorin.davidoi@protonmail.com>
Thu, 09 May 2019 16:09:38 +0000
changeset 532084 24229ccd566c018b38acb84e3c596b94b74f62d1
parent 532083 508ffb7ec16e450dd0ad75f6a0d35644116e1bc4
child 532085 78f94fc80dc1e114146d106b58667f2989d3b3b5
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1547821
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1547821 - Sync 133 - Don't manage focus via JavaScript r=jlast Differential Revision: https://phabricator.services.mozilla.com/D30304
devtools/client/debugger/src/components/Editor/SearchBar.css
devtools/client/debugger/src/components/Editor/SearchBar.js
devtools/client/debugger/src/components/Editor/tests/__snapshots__/SearchBar.spec.js.snap
devtools/client/debugger/src/components/ProjectSearch.js
devtools/client/debugger/src/components/shared/SearchInput.css
devtools/client/debugger/src/components/shared/SearchInput.js
devtools/client/debugger/src/components/shared/tests/__snapshots__/SearchInput.spec.js.snap
devtools/client/debugger/src/components/test/__snapshots__/ProjectSearch.spec.js.snap
devtools/client/debugger/src/components/test/__snapshots__/QuickOpenModal.spec.js.snap
--- a/devtools/client/debugger/src/components/Editor/SearchBar.css
+++ b/devtools/client/debugger/src/components/Editor/SearchBar.css
@@ -20,17 +20,17 @@
   right: 0;
   bottom: -1px;
   border: solid 1px var(--blue-50);
   pointer-events: none;
   opacity: 0;
   transition: opacity 150ms ease-out;
 }
 
-.search-bar-focused::before {
+.search-bar:focus-within::before {
   opacity: 1;
 }
 
 .search-bar .search-outline {
   flex-grow: 1;
   border-width: 0;
 }
 
--- a/devtools/client/debugger/src/components/Editor/SearchBar.js
+++ b/devtools/client/debugger/src/components/Editor/SearchBar.js
@@ -47,18 +47,17 @@ function getShortcuts() {
     searchShortcut: searchKey
   };
 }
 
 type State = {
   query: string,
   selectedResultIndex: number,
   count: number,
-  index: number,
-  inputFocused: boolean
+  index: number
 };
 
 type Props = {
   cx: Context,
   editor: SourceEditor,
   selectedSource?: Source,
   selectedContentLoaded: boolean,
   searchOn: boolean,
@@ -77,18 +76,17 @@ type Props = {
 
 class SearchBar extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
       query: props.query,
       selectedResultIndex: 0,
       count: 0,
-      index: -1,
-      inputFocused: false
+      index: -1
     };
   }
 
   componentWillUnmount() {
     const shortcuts = this.context.shortcuts;
     const {
       searchShortcut,
       searchAgainShortcut,
@@ -143,36 +141,36 @@ class SearchBar extends Component<Props,
   closeSearch = (e: SyntheticEvent<HTMLElement>) => {
     const { cx, closeFileSearch, editor, searchOn } = this.props;
     if (editor && searchOn) {
       this.clearSearch();
       closeFileSearch(cx, editor);
       e.stopPropagation();
       e.preventDefault();
     }
-    this.setState({ query: "", inputFocused: false });
+    this.setState({ query: "" });
   };
 
   toggleSearch = (e: SyntheticKeyboardEvent<HTMLElement>) => {
     e.stopPropagation();
     e.preventDefault();
     const { editor, searchOn, setActiveSearch } = this.props;
 
     if (!searchOn) {
       setActiveSearch("file");
     }
 
     if (searchOn && editor) {
       const query = editor.codeMirror.getSelection() || this.state.query;
 
       if (query !== "") {
-        this.setState({ query, inputFocused: true });
+        this.setState({ query });
         this.doSearch(query);
       } else {
-        this.setState({ query: "", inputFocused: true });
+        this.setState({ query: "" });
       }
     }
   };
 
   doSearch = (query: string) => {
     const { cx, selectedSource, selectedContentLoaded } = this.props;
     if (!selectedSource || !selectedContentLoaded) {
       return;
@@ -195,24 +193,16 @@ class SearchBar extends Component<Props,
   // Handlers
 
   onChange = (e: SyntheticInputEvent<HTMLElement>) => {
     this.setState({ query: e.target.value });
 
     return this.doSearch(e.target.value);
   };
 
-  onFocus = (e: SyntheticFocusEvent<HTMLElement>) => {
-    this.setState({ inputFocused: true });
-  };
-
-  onBlur = (e: SyntheticFocusEvent<HTMLElement>) => {
-    this.setState({ inputFocused: false });
-  };
-
   onKeyDown = (e: any) => {
     if (e.key !== "Enter" && e.key !== "F3") {
       return;
     }
 
     this.traverseResults(e, e.shiftKey);
     e.preventDefault();
     return this.doSearch(e.target.value);
@@ -315,36 +305,31 @@ class SearchBar extends Component<Props,
       searchOn,
       showClose = true,
       size = "big"
     } = this.props;
 
     if (!searchOn) {
       return <div />;
     }
-    const classes = classnames("search-bar", {
-      "search-bar-focused": this.state.inputFocused
-    });
+
     return (
-      <div className={classes}>
+      <div className="search-bar">
         <SearchInput
           query={this.state.query}
           count={count}
           placeholder={L10N.getStr("sourceSearch.search.placeholder2")}
           summaryMsg={this.buildSummaryMsg()}
           isLoading={false}
           onChange={this.onChange}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
           showErrorEmoji={this.shouldShowErrorEmoji()}
           onKeyDown={this.onKeyDown}
           onHistoryScroll={this.onHistoryScroll}
           handleNext={e => this.traverseResults(e, false)}
           handlePrev={e => this.traverseResults(e, true)}
-          shouldFocus={this.state.inputFocused}
           showClose={false}
         />
         <div className="search-bottom-bar">
           {this.renderSearchModifiers()}
           {showClose && (
             <React.Fragment>
               <span className="pipe-divider" />
               <CloseButton handleClick={this.closeSearch} buttonClass={size} />
--- a/devtools/client/debugger/src/components/Editor/tests/__snapshots__/SearchBar.spec.js.snap
+++ b/devtools/client/debugger/src/components/Editor/tests/__snapshots__/SearchBar.spec.js.snap
@@ -5,25 +5,22 @@ exports[`SearchBar should render 1`] = `
   className="search-bar"
 >
   <SearchInput
     expanded={false}
     handleNext={[Function]}
     handlePrev={[Function]}
     hasPrefix={false}
     isLoading={false}
-    onBlur={[Function]}
     onChange={[Function]}
-    onFocus={[Function]}
     onHistoryScroll={[Function]}
     onKeyDown={[Function]}
     placeholder="Find in file…"
     query=""
     selectedItemId=""
-    shouldFocus={false}
     showClose={false}
     showErrorEmoji={false}
     size=""
     summaryMsg=""
   />
   <div
     className="search-bottom-bar"
   >
@@ -78,25 +75,22 @@ exports[`showErrorEmoji false if no quer
 >
   <SearchInput
     count={0}
     expanded={false}
     handleNext={[Function]}
     handlePrev={[Function]}
     hasPrefix={false}
     isLoading={false}
-    onBlur={[Function]}
     onChange={[Function]}
-    onFocus={[Function]}
     onHistoryScroll={[Function]}
     onKeyDown={[Function]}
     placeholder="Find in file…"
     query=""
     selectedItemId=""
-    shouldFocus={false}
     showClose={false}
     showErrorEmoji={false}
     size=""
     summaryMsg=""
   />
   <div
     className="search-bottom-bar"
   >
@@ -149,25 +143,22 @@ exports[`showErrorEmoji false if query +
 >
   <SearchInput
     count={10}
     expanded={false}
     handleNext={[Function]}
     handlePrev={[Function]}
     hasPrefix={false}
     isLoading={false}
-    onBlur={[Function]}
     onChange={[Function]}
-    onFocus={[Function]}
     onHistoryScroll={[Function]}
     onKeyDown={[Function]}
     placeholder="Find in file…"
     query="test"
     selectedItemId=""
-    shouldFocus={false}
     showClose={false}
     showErrorEmoji={false}
     size=""
     summaryMsg="-NaN of 10 results"
   />
   <div
     className="search-bottom-bar"
   >
@@ -220,25 +211,22 @@ exports[`showErrorEmoji true if query + 
 >
   <SearchInput
     count={0}
     expanded={false}
     handleNext={[Function]}
     handlePrev={[Function]}
     hasPrefix={false}
     isLoading={false}
-    onBlur={[Function]}
     onChange={[Function]}
-    onFocus={[Function]}
     onHistoryScroll={[Function]}
     onKeyDown={[Function]}
     placeholder="Find in file…"
     query="test"
     selectedItemId=""
-    shouldFocus={false}
     showClose={false}
     showErrorEmoji={true}
     size=""
     summaryMsg="No results found"
   />
   <div
     className="search-bottom-bar"
   >
--- a/devtools/client/debugger/src/components/ProjectSearch.js
+++ b/devtools/client/debugger/src/components/ProjectSearch.js
@@ -51,17 +51,16 @@ type Result = {
   matches: Array<Match>,
   sourceId: string
 };
 
 type Item = Result | Match;
 
 type State = {
   inputValue: string,
-  inputFocused: boolean,
   focusedItem: ?Item
 };
 
 type Props = {
   cx: Context,
   query: string,
   results: List<Result>,
   status: StatusType,
@@ -85,17 +84,16 @@ function sanitizeQuery(query: string): s
   return query.replace(/\\$/, "");
 }
 
 export class ProjectSearch extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
       inputValue: this.props.query || "",
-      inputFocused: false,
       focusedItem: null
     };
   }
 
   componentDidMount() {
     const { shortcuts } = this.context;
 
     shortcuts.on(
@@ -176,18 +174,17 @@ export class ProjectSearch extends Compo
 
   onHistoryScroll = (query: string) => {
     this.setState({ inputValue: query });
   };
 
   onEnterPress = () => {
     if (
       !this.isProjectSearchEnabled() ||
-      !this.state.focusedItem ||
-      this.state.inputFocused
+      !this.state.focusedItem
     ) {
       return;
     }
     if (this.state.focusedItem.type === "MATCH") {
       this.selectMatchItem(this.state.focusedItem);
     }
   };
 
@@ -296,18 +293,16 @@ export class ProjectSearch extends Compo
         query={this.state.inputValue}
         count={this.getResultCount()}
         placeholder={L10N.getStr("projectTextSearch.placeholder")}
         size="big"
         showErrorEmoji={this.shouldShowErrorEmoji()}
         summaryMsg={this.renderSummary()}
         isLoading={status === statusType.fetching}
         onChange={this.inputOnChange}
-        onFocus={() => this.setState({ inputFocused: true })}
-        onBlur={() => this.setState({ inputFocused: false })}
         onKeyDown={this.onKeyDown}
         onHistoryScroll={this.onHistoryScroll}
         handleClose={
           // TODO - This function doesn't quite match the signature.
           (this.props.closeProjectSearch: any)
         }
         ref="searchInput"
       />
--- a/devtools/client/debugger/src/components/shared/SearchInput.css
+++ b/devtools/client/debugger/src/components/shared/SearchInput.css
@@ -12,17 +12,17 @@
 }
 
 .search-outline {
   border: 1px solid var(--theme-toolbar-background);
   border-bottom: 1px solid var(--theme-splitter-color);
   transition: border-color 200ms ease-in-out;
 }
 
-.search-outline.focused {
+.search-outline:focus-within {
   border-color: var(--blue-50);
 }
 
 .search-field {
   position: relative;
   display: flex;
   align-items: center;
   flex-shrink: 0;
--- a/devtools/client/debugger/src/components/shared/SearchInput.js
+++ b/devtools/client/debugger/src/components/shared/SearchInput.js
@@ -30,35 +30,31 @@ const arrowBtn = (onClick, type, classNa
 
 type Props = {
   count: number,
   expanded: boolean,
   handleClose?: (e: SyntheticMouseEvent<HTMLDivElement>) => void,
   handleNext?: (e: SyntheticMouseEvent<HTMLButtonElement>) => void,
   handlePrev?: (e: SyntheticMouseEvent<HTMLButtonElement>) => void,
   hasPrefix?: boolean,
-  onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
-  onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onKeyDown: (e: SyntheticKeyboardEvent<HTMLInputElement>) => void,
   onKeyUp?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => void,
   onHistoryScroll?: (historyValue: string) => void,
   placeholder: string,
   query: string,
   selectedItemId?: string,
-  shouldFocus?: boolean,
   showErrorEmoji: boolean,
   size: string,
   summaryMsg: string,
   showClose: boolean,
   isLoading: boolean
 };
 
 type State = {
-  inputFocused: boolean,
   history: Array<string>
 };
 
 class SearchInput extends Component<Props, State> {
   displayName: "SearchInput";
   $input: ?HTMLInputElement;
 
   static defaultProps = {
@@ -68,31 +64,24 @@ class SearchInput extends Component<Prop
     size: "",
     showClose: true
   };
 
   constructor(props: Props) {
     super(props);
 
     this.state = {
-      inputFocused: false,
       history: []
     };
   }
 
   componentDidMount() {
     this.setFocus();
   }
 
-  componentDidUpdate(prevProps: Props) {
-    if (this.props.shouldFocus && !prevProps.shouldFocus) {
-      this.setFocus();
-    }
-  }
-
   setFocus() {
     if (this.$input) {
       const input = this.$input;
       input.focus();
 
       if (!input.value) {
         return;
       }
@@ -121,34 +110,16 @@ class SearchInput extends Component<Prop
         handleNext,
         "arrow-down",
         classnames("nav-btn", "next"),
         L10N.getFormatStr("editor.searchResults.nextResult")
       )
     ];
   }
 
-  onFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    const { onFocus } = this.props;
-
-    this.setState({ inputFocused: true });
-    if (onFocus) {
-      onFocus(e);
-    }
-  };
-
-  onBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    const { onBlur } = this.props;
-
-    this.setState({ inputFocused: false });
-    if (onBlur) {
-      onBlur(e);
-    }
-  };
-
   onKeyDown = (e: any) => {
     const { onHistoryScroll, onKeyDown } = this.props;
     if (!onHistoryScroll) {
       return onKeyDown(e);
     }
 
     const inputValue = e.target.value;
     const { history } = this.state;
@@ -233,34 +204,28 @@ class SearchInput extends Component<Prop
 
     const inputProps = {
       className: classnames({
         empty: showErrorEmoji
       }),
       onChange,
       onKeyDown: e => this.onKeyDown(e),
       onKeyUp,
-      onFocus: e => this.onFocus(e),
-      onBlur: e => this.onBlur(e),
       "aria-autocomplete": "list",
       "aria-controls": "result-list",
       "aria-activedescendant":
         expanded && selectedItemId ? `${selectedItemId}-title` : "",
       placeholder,
       value: query,
       spellCheck: false,
       ref: c => (this.$input = c)
     };
 
     return (
-      <div
-        className={classnames("search-outline", {
-          focused: this.state.inputFocused
-        })}
-      >
+      <div className="search-outline">
         <div
           className={classnames("search-field", size)}
           role="combobox"
           aria-haspopup="listbox"
           aria-owns="result-list"
           aria-expanded={expanded}
         >
           {this.renderSvg()}
--- a/devtools/client/debugger/src/components/shared/tests/__snapshots__/SearchInput.spec.js.snap
+++ b/devtools/client/debugger/src/components/shared/tests/__snapshots__/SearchInput.spec.js.snap
@@ -14,19 +14,17 @@ exports[`SearchInput renders 1`] = `
     <AccessibleImage
       className="search"
     />
     <input
       aria-activedescendant=""
       aria-autocomplete="list"
       aria-controls="result-list"
       className=""
-      onBlur={[Function]}
       onChange={[Function]}
-      onFocus={[Function]}
       onKeyDown={[Function]}
       placeholder="A placeholder"
       spellCheck={false}
       value=""
     />
     <div
       className="search-field-summary"
     >
@@ -53,19 +51,17 @@ exports[`SearchInput shows nav buttons 1
     <AccessibleImage
       className="search"
     />
     <input
       aria-activedescendant=""
       aria-autocomplete="list"
       aria-controls="result-list"
       className=""
-      onBlur={[Function]}
       onChange={[Function]}
-      onFocus={[Function]}
       onKeyDown={[Function]}
       placeholder="A placeholder"
       spellCheck={false}
       value=""
     />
     <div
       className="search-field-summary"
     >
@@ -118,19 +114,17 @@ exports[`SearchInput shows svg error emo
     <AccessibleImage
       className="search"
     />
     <input
       aria-activedescendant=""
       aria-autocomplete="list"
       aria-controls="result-list"
       className="empty"
-      onBlur={[Function]}
       onChange={[Function]}
-      onFocus={[Function]}
       onKeyDown={[Function]}
       placeholder="A placeholder"
       spellCheck={false}
       value=""
     />
     <div
       className="search-field-summary"
     >
@@ -183,19 +177,17 @@ exports[`SearchInput shows svg magnifyin
     <AccessibleImage
       className="search"
     />
     <input
       aria-activedescendant=""
       aria-autocomplete="list"
       aria-controls="result-list"
       className=""
-      onBlur={[Function]}
       onChange={[Function]}
-      onFocus={[Function]}
       onKeyDown={[Function]}
       placeholder="A placeholder"
       spellCheck={false}
       value=""
     />
     <div
       className="search-field-summary"
     >
--- a/devtools/client/debugger/src/components/test/__snapshots__/ProjectSearch.spec.js.snap
+++ b/devtools/client/debugger/src/components/test/__snapshots__/ProjectSearch.spec.js.snap
@@ -11,19 +11,17 @@ exports[`ProjectSearch found no search r
       className="header"
     >
       <SearchInput
         count={0}
         expanded={false}
         handleClose={[MockFunction]}
         hasPrefix={false}
         isLoading={false}
-        onBlur={[Function]}
         onChange={[Function]}
-        onFocus={[Function]}
         onHistoryScroll={[Function]}
         onKeyDown={[Function]}
         placeholder="Find in files…"
         query="foo"
         selectedItemId=""
         showClose={true}
         showErrorEmoji={true}
         size="big"
@@ -114,19 +112,17 @@ exports[`ProjectSearch found search resu
         className="header"
       >
         <SearchInput
           count={5}
           expanded={false}
           handleClose={[MockFunction]}
           hasPrefix={false}
           isLoading={false}
-          onBlur={[Function]}
           onChange={[Function]}
-          onFocus={[Function]}
           onHistoryScroll={[Function]}
           onKeyDown={[Function]}
           placeholder="Find in files…"
           query="match"
           selectedItemId=""
           showClose={true}
           showErrorEmoji={false}
           size="big"
@@ -149,19 +145,17 @@ exports[`ProjectSearch found search resu
                   className="img search"
                 />
               </AccessibleImage>
               <input
                 aria-activedescendant=""
                 aria-autocomplete="list"
                 aria-controls="result-list"
                 className=""
-                onBlur={[Function]}
                 onChange={[Function]}
-                onFocus={[Function]}
                 onKeyDown={[Function]}
                 placeholder="Find in files…"
                 spellCheck={false}
                 value="match"
               />
               <div
                 className="search-field-summary"
               >
@@ -745,19 +739,17 @@ exports[`ProjectSearch should display lo
       className="header"
     >
       <SearchInput
         count={0}
         expanded={false}
         handleClose={[MockFunction]}
         hasPrefix={false}
         isLoading={true}
-        onBlur={[Function]}
         onChange={[Function]}
-        onFocus={[Function]}
         onHistoryScroll={[Function]}
         onKeyDown={[Function]}
         placeholder="Find in files…"
         query="match"
         selectedItemId=""
         showClose={true}
         showErrorEmoji={false}
         size="big"
@@ -784,19 +776,17 @@ exports[`ProjectSearch showErrorEmoji fa
       className="header"
     >
       <SearchInput
         count={0}
         expanded={false}
         handleClose={[MockFunction]}
         hasPrefix={false}
         isLoading={true}
-        onBlur={[Function]}
         onChange={[Function]}
-        onFocus={[Function]}
         onHistoryScroll={[Function]}
         onKeyDown={[Function]}
         placeholder="Find in files…"
         query="foo"
         selectedItemId=""
         showClose={true}
         showErrorEmoji={false}
         size="big"
@@ -823,19 +813,17 @@ exports[`ProjectSearch showErrorEmoji fa
       className="header"
     >
       <SearchInput
         count={5}
         expanded={false}
         handleClose={[MockFunction]}
         hasPrefix={false}
         isLoading={true}
-        onBlur={[Function]}
         onChange={[Function]}
-        onFocus={[Function]}
         onHistoryScroll={[Function]}
         onKeyDown={[Function]}
         placeholder="Find in files…"
         query="foo"
         selectedItemId=""
         showClose={true}
         showErrorEmoji={false}
         size="big"
@@ -870,19 +858,17 @@ exports[`ProjectSearch turns off shortcu
       className="header"
     >
       <SearchInput
         count={0}
         expanded={false}
         handleClose={[MockFunction]}
         hasPrefix={false}
         isLoading={false}
-        onBlur={[Function]}
         onChange={[Function]}
-        onFocus={[Function]}
         onHistoryScroll={[Function]}
         onKeyDown={[Function]}
         placeholder="Find in files…"
         query=""
         selectedItemId=""
         showClose={true}
         showErrorEmoji={true}
         size="big"
@@ -904,19 +890,17 @@ exports[`ProjectSearch where <Enter> has
       className="header"
     >
       <SearchInput
         count={0}
         expanded={false}
         handleClose={[MockFunction]}
         hasPrefix={false}
         isLoading={false}
-        onBlur={[Function]}
         onChange={[Function]}
-        onFocus={[Function]}
         onHistoryScroll={[Function]}
         onKeyDown={[Function]}
         placeholder="Find in files…"
         query=""
         selectedItemId=""
         showClose={true}
         showErrorEmoji={true}
         size="big"
--- a/devtools/client/debugger/src/components/test/__snapshots__/QuickOpenModal.spec.js.snap
+++ b/devtools/client/debugger/src/components/test/__snapshots__/QuickOpenModal.spec.js.snap
@@ -93,19 +93,17 @@ exports[`QuickOpenModal Basic render wit
                       className="img search"
                     />
                   </AccessibleImage>
                   <input
                     aria-activedescendant=""
                     aria-autocomplete="list"
                     aria-controls="result-list"
                     className="empty"
-                    onBlur={[Function]}
                     onChange={[Function]}
-                    onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Go to file…"
                     spellCheck={false}
                     value="@"
                   />
                 </div>
               </div>
             </SearchInput>
@@ -226,19 +224,17 @@ exports[`QuickOpenModal Basic render wit
                       className="img search"
                     />
                   </AccessibleImage>
                   <input
                     aria-activedescendant=""
                     aria-autocomplete="list"
                     aria-controls="result-list"
                     className="empty"
-                    onBlur={[Function]}
                     onChange={[Function]}
-                    onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Go to file…"
                     spellCheck={false}
                     value="#"
                   />
                 </div>
               </div>
             </SearchInput>
@@ -342,19 +338,17 @@ exports[`QuickOpenModal Basic render wit
                       className="img search"
                     />
                   </AccessibleImage>
                   <input
                     aria-activedescendant=""
                     aria-autocomplete="list"
                     aria-controls="result-list"
                     className=""
-                    onBlur={[Function]}
                     onChange={[Function]}
-                    onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Go to file…"
                     spellCheck={false}
                     value=""
                   />
                 </div>
               </div>
             </SearchInput>
@@ -510,19 +504,17 @@ exports[`QuickOpenModal Simple goto sear
                       className="img search"
                     />
                   </AccessibleImage>
                   <input
                     aria-activedescendant=""
                     aria-autocomplete="list"
                     aria-controls="result-list"
                     className="empty"
-                    onBlur={[Function]}
                     onChange={[Function]}
-                    onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Go to file…"
                     spellCheck={false}
                     value=":abc"
                   />
                   <div
                     className="search-field-summary"
                   >
@@ -631,19 +623,17 @@ exports[`QuickOpenModal showErrorEmoji f
                       className="img search"
                     />
                   </AccessibleImage>
                   <input
                     aria-activedescendant=""
                     aria-autocomplete="list"
                     aria-controls="result-list"
                     className=""
-                    onBlur={[Function]}
                     onChange={[Function]}
-                    onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Go to file…"
                     spellCheck={false}
                     value="dasdasdas"
                   />
                 </div>
               </div>
             </SearchInput>
@@ -795,19 +785,17 @@ exports[`QuickOpenModal showErrorEmoji f
                       className="img search"
                     />
                   </AccessibleImage>
                   <input
                     aria-activedescendant=""
                     aria-autocomplete="list"
                     aria-controls="result-list"
                     className=""
-                    onBlur={[Function]}
                     onChange={[Function]}
-                    onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Go to file…"
                     spellCheck={false}
                     value=":2222"
                   />
                   <div
                     className="search-field-summary"
                   >
@@ -916,19 +904,17 @@ exports[`QuickOpenModal showErrorEmoji f
                       className="img search"
                     />
                   </AccessibleImage>
                   <input
                     aria-activedescendant=""
                     aria-autocomplete="list"
                     aria-controls="result-list"
                     className=""
-                    onBlur={[Function]}
                     onChange={[Function]}
-                    onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Go to file…"
                     spellCheck={false}
                     value=""
                   />
                 </div>
               </div>
             </SearchInput>
@@ -1048,19 +1034,17 @@ exports[`QuickOpenModal showErrorEmoji t
                       className="img search"
                     />
                   </AccessibleImage>
                   <input
                     aria-activedescendant=""
                     aria-autocomplete="list"
                     aria-controls="result-list"
                     className="empty"
-                    onBlur={[Function]}
                     onChange={[Function]}
-                    onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Go to file…"
                     spellCheck={false}
                     value=":22k22"
                   />
                   <div
                     className="search-field-summary"
                   >
@@ -1169,19 +1153,17 @@ exports[`QuickOpenModal showErrorEmoji t
                       className="img search"
                     />
                   </AccessibleImage>
                   <input
                     aria-activedescendant=""
                     aria-autocomplete="list"
                     aria-controls="result-list"
                     className="empty"
-                    onBlur={[Function]}
                     onChange={[Function]}
-                    onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Go to file…"
                     spellCheck={false}
                     value="test"
                   />
                 </div>
               </div>
             </SearchInput>
@@ -1348,19 +1330,17 @@ exports[`QuickOpenModal updateResults on
                       className="img search"
                     />
                   </AccessibleImage>
                   <input
                     aria-activedescendant=""
                     aria-autocomplete="list"
                     aria-controls="result-list"
                     className=""
-                    onBlur={[Function]}
                     onChange={[Function]}
-                    onFocus={[Function]}
                     onKeyDown={[Function]}
                     placeholder="Go to file…"
                     spellCheck={false}
                     value=""
                   />
                 </div>
               </div>
             </SearchInput>