Reputation: 427
how to dismiss keyboard after search in mobile using react js ? i want to dismiss keyboard in mobile for responsive design after search. i use onFocus
and onBlur
but it didn't work at all.
my input
<input
type="text"
name="url"
ref={register}
placeholder="Paste product link or Search from million of products..."
defaultValue={q !== undefined ? q : ""}
style={{ background: "none" }}
/>
my submit function
const onSubmit = (data, e) => {
e.preventDefault();
e.target.reset();
let regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%\-\/]))?/;
// Again check it is link or keyword
if (regex.test(data.url)) {
router.push({
pathname: '/product',
query: { url: encodeURI(data.url) },
})
}
else {
setIsProductsLoading(true)
router.push({
pathname: '/products',
query: { q: data.url, page: 1 },
})
}
}
i also use
if(e.key == 'Enter'){
e.target.blur();
}
this method to try dismiss keyboard but it also didn't work.
Upvotes: 2
Views: 1470
Reputation: 93
how about e.target[0].blur();
before e.preventDefault();
.
i use next.js, but it worked!
If you can't, let's console.log('event:', e);
and is there input element in e.target?
Upvotes: 1