Bir arama motoru yaptım, motora en az 3 harf girince onunla ilgili diğer maddeler de gözüküyor. Ne zaman ki bu maddelerden birine tıkladığımızda bizi o sayfaya yönlendirmeli. Ancak eğer input odağını kaybederse bu maddeler de kaybolmalı. Klasik ekşisözlük arama motoru gibi düşünebilirsiniz.

Ben inputun odağını kontrol etmek için onFocus ve onBlur olaylarını kullandım. Ancak ilgili maddelere tıkladığımızda -bu maddeler alanı mutlak pozisyonda olduğundan- input odağını kaybettiği için maddeler kayboluyor. Bu sorunu nasıl aşabilirim? Kodlar (React):

odak kontrolü için gerekli gördüğüm state:

const [focused, setFocused] = useState(false)

Inputun jsx'i:

<input 
    className="search-input"
    type="text"
    placeholder="Karşılığını aratmak istediğiniz sözcüğü girin"
    onChange={e => setInputData(e.target.value)}
    onFocus={e => {
        setFocused(true)
    }}
    onBlur={e => setFocused(false)}
/>

İlgili maddelerin jsx'i:

<div 
    className="results"
    style={{
        display: `${(inputData.length >= 3 && focused) ? "block" : "none"}`
    }}
>
    {relatedWords.map(relatedWord => (
        <WordResult
            word={relatedWord}
            key={relatedWords.indexOf(relatedWord)} 
            />
        ))}
</div> 

Madde sayfasının css'i

width: 540px;
position: absolute;
top: 335px;
left: 475px;

Yardımlarınız için Teşekkürler