How to search only when clicked enter, not as typed

[furkanayilmaz]

Hi Everyone,

I have my DataSearch and I want to make it so that it searches when I hit enter. I already have onKeyDown code but yet still it searches as I type but the behavior should be to wait and not query and only query when clicked enter. Any help appreciated. Thank you!

`constructor(props) {
super(props);
this.state = {
value: '',
};
}

render = () => {
const { className, ...props } = this.props;
return (
<StyledDataSearch
componentId={REACTIVE_ID}
filterLabel="Search"
onKeyDown={(event: React.KeyboardEvent, triggerQuery: () => void) => {
if (event.key === 'Enter') {
triggerQuery();
}
}}
value={this.state.value}
onChange={(value) => this.setState({ value })}
customQuery={props.customQuery || ((value, props) => {
const escaped = value
.replace('/', '\/')
.replace(/[^0-9a-zA-Z._\\/]/g, ' ')
.toLowerCase()
if (!value) {
return {};
}
return {
query: {
query_string: {
query: escaped,
fields: props.dataField,
default_operator: props.queryFormat,
},
},
};
})}
{...props}
/>
);
};`

[siddharthlatest]

There is an enterButton prop that supports searching on an enter key press. This is supported with the SearchBox component in ReactiveSearch v4, but I also see that it is supported with the DataSearch component.

[furkanayilmaz]

I just looked at the docs and it is included in one of the examples. For some reason it does not show up in my props in VS code and it says this prop does not exist in the interface.