I want to set the display size of the dropdown to show only 5 values and then apply scroll in React js.

Ex.

<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>

This works with normal HTML format. I want it to work it with React js. So is it possible to achieve this?

<select onfocus="this.size = 5;" onblur="this.size = 1" onchange="this.size=1">
    <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 want to set the display size of the dropdown to show only 5 values and then apply scroll in React js.

Ex.

<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>

This works with normal HTML format. I want it to work it with React js. So is it possible to achieve this?

<select onfocus="this.size = 5;" onblur="this.size = 1" onchange="this.size=1">
    <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>

• javascript
• reactjs
• material-design

Share Improve this question Follow asked Oct 22, 2018 at 11:55 parthparth 67411 gold badge1111 silver badges2929 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

try this

onFocus={(e)=>{e.target.size = 5}}

the same for the others be sure that the first letter after on in an uppercase. But I think it would be better if you create a state like this

this.state = {
   size: 1
}

and then change the select tag to

<select size={this.state.size} onFocus={()=>{this.setState({size: 5})}} onBlur={()=>{this.setState({size: 1})}} onChange={(e)=>{e.target.blur()}}>

Here is the Jsfiddle

You can use react-bootstrap and create scrollable dropdown by applying fixed height for the .dropdown-menu element and set overflow-y: scroll;

For example

import React, { Component } from 'react'
import { DropdownButton, MenuItem } from 'react-bootstrap'
import './QuantityInput.css'

export default class ScrollableDrop extends Component {
  render() {
    return (
      <DropdownButton
        bsStyle="default"
        bsSize="small"
        style={{ maxHeight: "28px" }}
        title={"Qty"}
        key={1}
        id="dropdown-size-small"
      >
        <MenuItem eventKey="1">Action</MenuItem>
        <MenuItem eventKey="2">Another action</MenuItem>
        <MenuItem eventKey="3" active>
          Active Item
        </MenuItem>
        <MenuItem eventKey="4">Separated link</MenuItem>
      </DropdownButton>
    )
  }
}

QuantityInput.css

.dropdown-menu {
  height: 70px;
  overflow-y: scroll;
}

OR

You might wanna implement custom dropdown which loads on scroll

Implementing Infinite Scroll With React Js without any plugin