CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-hook-form
Koushik Saha
Koushik Saha

Reputation: 427

How to dismiss keyboard after search in react js?

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

Answers (1)

Takuya Matsuda
Takuya Matsuda

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

Related Questions