I have created a simple Search with Semantic UI's Search Component like this:
<Search
value={searchString}
onSearchChange={onSearchChange}
showNoResults={false}
size="massive"
placeholder="eg. Huberdo"
input="text"
/>
This is my onSearchChange
func:
const onSearchChange = (e, data) => {
console.log(e.keyCode);
if (e.keyCode === 13) {
submit();
}
setSearchString(e.target.value);
};
Here is a minimum example of my problem. https://codesandbox.io/s/blue-leaf-7mzvo?fontsize=14
The Problem:
When I console log the event, I can't find any information about the keyCode that was pressed. e.keyCode
is undefined as is e.charCode
.
I need this so I can submit the search when the user hits enter.
Where is the keyCode hidden?
According to the Semantic UI Doc's the func gets passed in a normal synthetic react event.
e.target.value
is working as expected.
You can do this by adding an onKeyDown
prop:
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Search } from "semantic-ui-react";
import "./styles.css";
function App() {
const [searchString, setSearchString] = useState("");
const handleEnter = e => {
if (e.keyCode === 13) {
submit();
}
};
const onSearchChange = (e, data) => {
setSearchString(e.target.value);
};
const submit = () => {
console.log("submitted");
};
return (
<Search
value={searchString}
onSearchChange={onSearchChange}
showNoResults={false}
size="massive"
placeholder="eg. Huberdo"
input="text"
onKeyDown={handleEnter}
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);