Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(search bar): enable search with input from virtual keyboard #1921

Merged
merged 6 commits into from
Jun 26, 2024
Merged

fix(search bar): enable search with input from virtual keyboard #1921

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c60f166
fix(search bar): enable search with input from virtual keyboard
yonadavGit Jun 10, 2024
bc2b7e9
fix(searchbar): enable search by clicking Enter in virtual keyboard
yonadavGit Jun 18, 2024
d6bfddb
fix(searchbar): prevent deletion of input inserted via virtual-keyboa…
yonadavGit Jun 18, 2024
5625fdf
fix(searchbar): cleaner code, plus avoid setValueInput when vkeyboard…
yonadavGit Jun 18, 2024
b2f6f4e
refactor(search bar): make getInputValue use getVirtualKeyboardInputV…
yonadavGit Jun 24, 2024
0502f39
refactor(search bar): safer query to get the input search element
yonadavGit Jun 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions static/js/Autocomplete.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,31 +174,37 @@ const EntitySearchSuggestion = ({label, onClick, type, url, ...props}) => {
);
}

const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebrewKeyboard,
const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebrewKeyboard, setInputValue,
setSearchFocused, searchFocused,
submitSearch, redirectToObject}) => {

const getInputValue = () =>{
return otherDownShiftProps.value || document.getElementsByClassName('keyboardInput')[0].value;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this function should use getVirtualKeyboardInputValue()

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, this is very dangerous since you're getting the first instance of a CSS class. If this class is used by some other element this could break. Can you come up with a more specific CSS selector?

}
const getVirtualKeyboardInputValue = () =>{
return document.getElementsByClassName('keyboardInput')[0].value;
}
useEffect(() => {
showVirtualKeyboardIcon(false); // Initially hide the virtual keyboard icon
}, []);
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 = getInputValue();
if (!inputQuery) return;
submitSearch(inputQuery);
};


const handleSearchButtonClick = (event) => {
const inputQuery = otherDownShiftProps.value
const inputQuery = getInputValue();
if (inputQuery) {
submitSearch(inputQuery);
} else {
Expand All @@ -224,12 +230,14 @@ const SearchInputBox = ({getInputProps, suggestions, highlightedIndex, hideHebre

const blurSearch = (e) => {
onBlur(e);
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);
}
!document.getElementById('keyboardInputMaster') && setInputValue(oldValue)
};

const inputClasses = classNames({
Expand Down Expand Up @@ -353,6 +361,7 @@ const SuggestionsGroup = ({ suggestions, initialIndexForGroup, getItemProps, hig
getInputProps,
getItemProps,
highlightedIndex,
setInputValue
} = useCombobox({
items: suggestions,
itemToString: (item) => (item ? item.name : ''),
Expand Down Expand Up @@ -465,6 +474,7 @@ const SuggestionsGroup = ({ suggestions, initialIndexForGroup, getItemProps, hig
suggestions={suggestions}
hideHebrewKeyboard={hideHebrewKeyboard}
highlightedIndex={highlightedIndex}
setInputValue={setInputValue}

setSearchFocused={setSearchFocused}
searchFocused={searchFocused}
Expand Down
2 changes: 2 additions & 0 deletions static/js/lib/keyboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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++)
Expand Down
Loading