From c60f16639d87227f7a3329eb1860ceead9aa9a8b Mon Sep 17 00:00:00 2001 From: yonadavGit Date: Mon, 10 Jun 2024 15:12:43 +0300 Subject: [PATCH 1/6] fix(search bar): enable search with input from virtual keyboard --- static/js/Autocomplete.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/Autocomplete.jsx b/static/js/Autocomplete.jsx index 1bdb9bc916..5a212fd0d2 100644 --- a/static/js/Autocomplete.jsx +++ b/static/js/Autocomplete.jsx @@ -198,7 +198,7 @@ const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebre const handleSearchButtonClick = (event) => { - const inputQuery = otherDownShiftProps.value + const inputQuery = otherDownShiftProps.value || document.getElementsByClassName('keyboardInput')[0].value; if (inputQuery) { submitSearch(inputQuery); } else { From bc2b7e932144654b8d536028486325b2d67ab975 Mon Sep 17 00:00:00 2001 From: yonadavGit Date: Tue, 18 Jun 2024 12:27:47 +0300 Subject: [PATCH 2/6] fix(searchbar): enable search by clicking Enter in virtual keyboard --- static/js/Autocomplete.jsx | 4 ++-- static/js/lib/keyboard.js | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/static/js/Autocomplete.jsx b/static/js/Autocomplete.jsx index 5a212fd0d2..d43cd83b3d 100644 --- a/static/js/Autocomplete.jsx +++ b/static/js/Autocomplete.jsx @@ -184,14 +184,14 @@ const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebre const { onBlur, onKeyDown, ...otherDownShiftProps } = getInputProps(); const handleSearchKeyDown = (event) => { - onKeyDown(event) + onKeyDown(event); if (event.keyCode !== 13) return; const highlightedItem = highlightedIndex > -1 ? suggestions[highlightedIndex] : null if (highlightedItem && highlightedItem.type != 'search'){ redirectToObject(highlightedItem); return; } - const inputQuery = otherDownShiftProps.value + const inputQuery = otherDownShiftProps.value || document.getElementsByClassName('keyboardInput')[0].value; if (!inputQuery) return; submitSearch(inputQuery); }; diff --git a/static/js/lib/keyboard.js b/static/js/lib/keyboard.js index c90c35f00c..0f3cc4353a 100644 --- a/static/js/lib/keyboard.js +++ b/static/js/lib/keyboard.js @@ -1486,6 +1486,8 @@ var VKI_attach, VKI_close; break; case "Enter": VKI_addListener(td, 'click', function() { + let element = document.querySelector('[vki_attached="true"]'); + element.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', code: 'Enter', keyCode: 13, which: 13, bubbles: true, cancelable: true})); if (self.VKI_target.nodeName != "TEXTAREA") { if (self.VKI_enterSubmit && self.VKI_target.form) { for (var z = 0, subm = false; z < self.VKI_target.form.elements.length; z++) From d6bfddb717ffe16b546dd136144cf8121ef9b202 Mon Sep 17 00:00:00 2001 From: yonadavGit Date: Tue, 18 Jun 2024 14:04:06 +0300 Subject: [PATCH 3/6] fix(searchbar): prevent deletion of input inserted via virtual-keyboard on blur using downshift setInputValue function --- static/js/Autocomplete.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/static/js/Autocomplete.jsx b/static/js/Autocomplete.jsx index d43cd83b3d..dc23b2645b 100644 --- a/static/js/Autocomplete.jsx +++ b/static/js/Autocomplete.jsx @@ -174,7 +174,7 @@ const EntitySearchSuggestion = ({label, onClick, type, url, ...props}) => { ); } -const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebrewKeyboard, +const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebrewKeyboard, setInputValue, setSearchFocused, searchFocused, submitSearch, redirectToObject}) => { @@ -224,12 +224,14 @@ const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebre const blurSearch = (e) => { onBlur(e); + const oldValue = document.getElementsByClassName('keyboardInput')[0].value; const parent = document.getElementById('searchBox'); if (!parent.contains(e.relatedTarget) && !document.getElementById('keyboardInputMaster')) { // debug: comment out the following line: setSearchFocused(false); showVirtualKeyboardIcon(false); } + setInputValue(oldValue) }; const inputClasses = classNames({ @@ -353,6 +355,7 @@ const SuggestionsGroup = ({ suggestions, initialIndexForGroup, getItemProps, hig getInputProps, getItemProps, highlightedIndex, + setInputValue } = useCombobox({ items: suggestions, itemToString: (item) => (item ? item.name : ''), @@ -465,6 +468,7 @@ const SuggestionsGroup = ({ suggestions, initialIndexForGroup, getItemProps, hig suggestions={suggestions} hideHebrewKeyboard={hideHebrewKeyboard} highlightedIndex={highlightedIndex} + setInputValue={setInputValue} setSearchFocused={setSearchFocused} searchFocused={searchFocused} From 5625fdfc598b6664e6ebe0a3744f4cc28bd2c897 Mon Sep 17 00:00:00 2001 From: yonadavGit Date: Tue, 18 Jun 2024 15:54:40 +0300 Subject: [PATCH 4/6] fix(searchbar): cleaner code, plus avoid setValueInput when vkeyboard not open --- static/js/Autocomplete.jsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/static/js/Autocomplete.jsx b/static/js/Autocomplete.jsx index dc23b2645b..d029830495 100644 --- a/static/js/Autocomplete.jsx +++ b/static/js/Autocomplete.jsx @@ -178,6 +178,12 @@ const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebre setSearchFocused, searchFocused, submitSearch, redirectToObject}) => { + const getInputValue = () =>{ + return otherDownShiftProps.value || document.getElementsByClassName('keyboardInput')[0].value; + } + const getVirtualKeyboardInputValue = () =>{ + return document.getElementsByClassName('keyboardInput')[0].value; + } useEffect(() => { showVirtualKeyboardIcon(false); // Initially hide the virtual keyboard icon }, []); @@ -191,14 +197,14 @@ const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebre redirectToObject(highlightedItem); return; } - const inputQuery = otherDownShiftProps.value || document.getElementsByClassName('keyboardInput')[0].value; + const inputQuery = getInputValue(); if (!inputQuery) return; submitSearch(inputQuery); }; const handleSearchButtonClick = (event) => { - const inputQuery = otherDownShiftProps.value || document.getElementsByClassName('keyboardInput')[0].value; + const inputQuery = getInputValue(); if (inputQuery) { submitSearch(inputQuery); } else { @@ -224,14 +230,14 @@ const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebre const blurSearch = (e) => { onBlur(e); - const oldValue = document.getElementsByClassName('keyboardInput')[0].value; + const oldValue = getVirtualKeyboardInputValue(); const parent = document.getElementById('searchBox'); if (!parent.contains(e.relatedTarget) && !document.getElementById('keyboardInputMaster')) { // debug: comment out the following line: setSearchFocused(false); showVirtualKeyboardIcon(false); } - setInputValue(oldValue) + !document.getElementById('keyboardInputMaster') && setInputValue(oldValue) }; const inputClasses = classNames({ From b2f6f4e6174af89f76924c2245ff013058aaf76c Mon Sep 17 00:00:00 2001 From: yonadavGit Date: Mon, 24 Jun 2024 16:19:00 +0300 Subject: [PATCH 5/6] refactor(search bar): make getInputValue use getVirtualKeyboardInputValue --- static/js/Autocomplete.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/Autocomplete.jsx b/static/js/Autocomplete.jsx index d029830495..75ef1836bd 100644 --- a/static/js/Autocomplete.jsx +++ b/static/js/Autocomplete.jsx @@ -179,7 +179,7 @@ const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebre submitSearch, redirectToObject}) => { const getInputValue = () =>{ - return otherDownShiftProps.value || document.getElementsByClassName('keyboardInput')[0].value; + return otherDownShiftProps.value || getVirtualKeyboardInputValue(); } const getVirtualKeyboardInputValue = () =>{ return document.getElementsByClassName('keyboardInput')[0].value; From 0502f39ea0932b3e42d6f79c336ed3b040db3959 Mon Sep 17 00:00:00 2001 From: yonadavGit Date: Tue, 25 Jun 2024 10:30:29 +0300 Subject: [PATCH 6/6] refactor(search bar): safer query to get the input search element --- static/js/Autocomplete.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/Autocomplete.jsx b/static/js/Autocomplete.jsx index 75ef1836bd..06cfac82d2 100644 --- a/static/js/Autocomplete.jsx +++ b/static/js/Autocomplete.jsx @@ -182,7 +182,7 @@ const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebre return otherDownShiftProps.value || getVirtualKeyboardInputValue(); } const getVirtualKeyboardInputValue = () =>{ - return document.getElementsByClassName('keyboardInput')[0].value; + return document.querySelector('#searchBox .keyboardInput').value; } useEffect(() => { showVirtualKeyboardIcon(false); // Initially hide the virtual keyboard icon