Topic: MDBAutoComplete autoSelect doesn't seem to fire

LyncoDev premium asked 1 day ago


Expected behavior If autoSelect is added as a prop, lost focus(tab away) on the autocomplete should fill the textbox with the chosen value and trigger onSelect. ie:Should function as described by the documentation.

Actual behavior Nothing. No reaction. No event fires. Whatever I type in the textbox is left and nothing is selected.

Resources (screenshots, code snippets etc.)

import React from 'react';
import { MDBAutocomplete } from 'mdb-react-ui-kit';

export class SimpleMDBAutocomplete extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      defaultData:props.data, //Expects [{text,value}]
      visibleList:props.data,
      searchValue:""
    };

    this.onSearch = this.onSearch.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onSelect = this.onSelect.bind(this);
    this.onClosed = this.onClosed.bind(this);
  }

  onSearch(value){
    console.log(`Searching ${JSON.stringify(value)}`);
    const newList = this.state.defaultData.filter((item)=>item.text.toLowerCase().startsWith(value.toLowerCase()))
    this.setState({
      visibleList:newList
    });
  }

  onSelect(row){
    //Only gets fired when the user clicks to select an item from the list
    console.log(`Selected ${JSON.stringify(row)}`);
    this.props.onSelect(row.value);
  }

  onClosed(){
    //This is me trying to replicate the expected functionality
    console.log(`Closed`);
    let selectedRow = this.state.visibleList[0];
    this.setState({searchValue:selectedRow.text});
    this.onSelect(selectedRow);
  }

  onChange(value){
    console.log(`Changed ${JSON.stringify(value)}`);
    this.setState({searchValue:value});
  }

  render(){
    return <MDBAutocomplete 
        className={this.props.className}
        id={this.props.id}
        autoSelect            
        value={this.state.searchValue}
        displayValue={(row)=>row.text}
        data={this.state.visibleList}
        onChange={this.onChange}
        onSelect={this.onSelect}
        onSearch={this.onSearch}
        onClosed={this.onClosed}
        />
  }
}

LyncoDev premium answered 17 hours ago


I guess if that is how you've coded it, it works the way you coded it and I see that the Select component works similarly.

You should definitely add the above snippet to the documentation and review the rest. I spent three hours yesterday trying to experiment my way into a function that didn't work the way I expected.

I think you should also reference that this component is not intended to be used as a searchable Select component and that MDBSelect has a search feature.


Mateusz Lazaru staff answered 22 hours ago


Expected behavior of autoSelect is to select an option when it is highlighted and the tab is clicked. It doesn't work if the option is not highlighted at the moment of tab keydown.

working example:

import React, { useState } from 'react';
import { MDBAutocomplete } from 'mdb-react-ui-kit';

const defaultData = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'];

export default function App() {
  const [data, setData] = useState(defaultData);

  const onSearch = (value: string) =>
    setData(defaultData.filter((item) => item.toLowerCase().startsWith(value.toLowerCase())));

  return (
    <MDBAutocomplete
      autoSelect={true}
      onSelect={(e) => console.log('e: ', e)}
      data={data}
      label='Example label'
      onSearch={onSearch}
    />
  );
}


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 9.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No