Add Keyboard Navigation to modal search

[anubra266]

This code should do it when myself or anyone decides to open a pull request.

const [activeItem,setActiveItem] = useState(0)

const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = e => {
        //* When Enter is pressed
        if (e.keyCode === 13) {
            openPage(result[activeItem]);
            //* When Up arrow is pressed
        } else if (e.key === 'ArrowUp') {
            if (activeItem === 0) {
                e.preventDefault();
                return;
            }
            setActiveItem((a) => a - 1);
            e.preventDefault();
            //* When Down arrow is pressed
        } else if (e.key === 'ArrowDown') {
            if (activeItem === result.length - 1) {
                return;
            }
            setActiveItem((a) => a + 1);
        }
    };

const onChange = () => {
    ...whateverWasThereBefore
    setActiveItem(0)
}

<Input onKeyDown={onKeyDown} onChange={onChange} />

[Dipeshwagle]

It is for the search modal in the website right?

[anubra266]

Yeah it is @Dipeshwagle

[Dipeshwagle]

Thanks for the great library I will work on this issue.

[anubra266]

Thanks! and you're welcome.

[Dipeshwagle]

#36 Sent a pull request to add this feature, but it was not as straightforward as I thought because the results were in an object with a category.