-1

I have a select field with a bunch of options:

<select>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
   <option>6</option>
   <option>7</option>
   <option>8</option>
   <option>9</option>
   <option>10</option>
</select>

I am using React, and because of a lack of height available on my page, I want to restrict my select field so that when a user clicks it, not all 10 options are seen, only 5.

I have looked at and tried this answer and using camelcase versions of the attributes mentioned (onBlur, onFocus) etc, but this is not effective in React, returning console errors.

Community
  • 1
  • 1
alanbuchanan
  • 3,993
  • 7
  • 41
  • 64

1 Answers1

1

You can use onFocus and onBlur events to set your target size.

<select onFocus={(e) => e.target.size = 5} onBlur={(e) => e.target.size = 1}

jsfiddle example

QoP
  • 27,388
  • 16
  • 74
  • 74