Search within select focus

Topic: Search within select focus asked 3 years ago

Expected behavior As per your wiki example pro component (I use pro version) when first click into Search within select element, it focuses on input searchbox so I can start typing straight away.

Actual behavior

Using the code example provided, such focus is not happening. What code do we have to use to make the component focus on the searchbox and avoid an extra click as per your wiki example?

Resources (screenshots, code snippets etc.)

Konrad Stępień staff answered 3 years ago


A general MDBSelect refactor is planned.

We will try to introduce it in the near future.

Examples from the documentation come from jQuery technology, they are used only for presentation and hence this bug.

Sorry, for the problems.

Best regards, Konrad. answered 3 years ago

@Konrad Stępień I've purchased pro React version primarily for this component. Showcasing JQuery functionality pretending to be a React component is wrong on so many levels. I have a client demo coming up in 1 weeks time. What are the suggestions there for me to get this working like in the Demo?

Konrad Stępień staff answered 3 years ago


Can you test my code? I made the setFocus function for search input when you open select.

import React, { Component } from 'react';
import { MDBSelect } from 'mdbreact';

class SelectPage extends Component {
  state = {
    options: [
        text: 'USA',
        value: '1'
        text: 'Germany',
        value: '2'
        text: 'France',
        value: '3'
        text: 'Poland',
        value: '4'
        text: 'Japan',
        value: '5'

  setFocus = e => {
    const search ='#selectSearchInput');

    setTimeout(() => {
    }, 100);

  render() {
    return (
          selected='Choose your option'
          label='Example label'

export default SelectPage;

Best regards, Konrad.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.21.0
  • Device: PC
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No