Scroll on select box not on page - reactjs

Question

I am fetching data from an API and then displaying it as options in the select boxes. The option chosen from the first select box will populate the options for second select box. and after that we will submit the form which will redirect us to a different page. This whole functionality is working fine.
The scrolling in the select boxes is working fine on keyboard keys press, dragging the scroll bar.
I am stuck at the point that whenever I scroll over the options the page gets scrolled instead of the options dropdown and I don't want to use Jquery as it is not suggested to be used with ReactJs. Is their any option other than Jquery to perform this operation?
import React from 'react';
import { Route, Redirect } from 'react-router'
import { Async } from 'react-select';
import Select from 'react-select'
import { renameKeys } from '../utils'
export class ExplorePage extends React.Component {
constructor() {
super()
this.state = {
cityValue: null,
universityValue: 0,
unselectedUnivValue: [],
os: "",
classes: "",
class2: ""
}
this.universitySelectChange = this.universitySelectChange.bind(this);
this.citySelectChange = this.citySelectChange.bind(this);
this.getCities = this.getCities.bind(this)
this.getUniv = this.getUniv.bind(this)
this.osCheck = this.osCheck.bind(this);
}
osCheck() {
this.state.os = navigator.platform;
console.log(this.state.os);
if (this.state.os == 'Win32') {
this.state.classes = document.getElementsByClassName('Select-placeholder');
for (var i = 0; i < this.state.classes.length; i++) {
this.state.classes[i].classList.add('for-Win32');
}
this.state.class2 = document.getElementsByClassName('Select-value');
for (var i = 0; i < this.state.class2.length; i++) {
this.state.class2[i].classList.add('for-Win32');
}
}
}
componentDidMount() {
this.osCheck();
}
componentWillUnmount() {
this.osCheck();
}
universitySelectChange = (universityValue) => {
this.setState({ universityValue });
}
citySelectChange = (cityValue) => {
this.setState({ cityValue });
this.getUniv(cityValue).then((options) => { this.setState({ unselectedUnivValue: options }) })
}
getCities() {
return fetch(`API`)
.then((response) => response.json())
.then((json) => {
let newKey = { city_id: 'value', name: 'label' }
return {
options: json.response.result.map((item) => renameKeys(item, newKey))
}
})
}
getUniv(cityValue) {
return fetch(`API`)
.then((response) => response.json())
.then((json) => {
let newKey = { university_id: 'value', name: 'label' }
let toReturn = json.response.result.map((item) => renameKeys(item, newKey))
return toReturn
})
}
render() {
return <section id="scroll-section6" className="explore-res img-bg height-70 d-flex align-items-center">
<div className="container">
<div className="row">
<div className="col-lg-12 mt-5 pt-5">
<div className="st-sec-content">
<h1 className="st-sec-heading">EXPLORE RESIDENCES</h1>
<form>
<ul className="res-prop-select-group">
<li>
<div className="city-icon"></div>
<Async
onChange={() => { this.osCheck(), this.citySelectChange }}
loadOptions={this.getCities}
placeholder="Select your City"
removeSelected={this.state.removeSelected}
simpleValue
value={this.state.cityValue}>
</Async>
</li>
<li>
<div className="country-icon"></div>
<Select multi
onChange={() => { this.osCheck(), this.universitySelectChange }}
options={this.state.unselectedUnivValue}
placeholder="Select your College"
removeSelected={this.state.removeSelected}
simpleValue
value={this.state.universityValue}>
</Select>
</li>
<li>
<button className="st-l-hm-btn-1 a-link go mr-0">
<a class="text-white font-weight-light"
href={this.state.cityValue === null ? '/residence' : `/residence/${this.state.cityValue}/${this.state.universityValue}`}
onClick={(e) => {
}}>Go</a></button>
</li>
</ul>
</form>
</div>
</div>
</div>
</div >
</section >
}
}

Answer 1

Have you tried using focus() method
You could use the above focus method on the select ref
or you could also set autofocus prop on the select like so
<Select multi onChange={()=>
{this.osCheck(), this.universitySelectChange }}
autoFocus={true}
options={this.state.unselectedUnivValue}
placeholder="Select your College"
removeSelected={this.state.removeSelected}
simpleValue
value={this.state.universityValue}>
</Select>