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}
/>
);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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