Deepak•2y ago

Deepak – 06-47 Aug 10

How can I navigate a list through arrow keys?

{SearchResult.map((country)=>{
            return <div className='border-b'>{country.properties.name}</div>
      })}

{SearchResult.map((country)=>{
            return <div className='border-b'>{country.properties.name}</div>
      })}

5 Replies

What do you mean by navigate? Highlight list items or what?

Deepak•2y ago

its a search suggestion. kind of drop down of countries when i type. but i want to select the right country using the arrow keys

I suggest you use <datalist> element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist It handles arrow key navigation out of the box

Deepak•2y ago

I can use many npm packages if were to handle it out of the box but thanks for your suggestion

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1006816030863130687