Topic: Events getData & getSelectedValue for MDBSelect multiple don't return selected (MDB5 Pro version 1.0.0-beta7)
Alecta priority asked 3 years ago
Hi,
Trying to use MDBSelect multiple but the event handlers don´t return selected values. Works fine if I remove the "multiple" attribute, but I need to use multiple selects for my purpose. Example CRA App.tsx:
import React, { useState } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import "mdb-react-ui-kit/dist/css/mdb.min.css";
import './App.css';
import { MDBSelect } from 'mdb-react-ui-kit';
function App() {
return (
<div className="App">
<div className="container">
<div className="col col-lg-12 mt-5">
<MDBSelect
search
multiple
searchLabel="Search..."
label={"Label"}
data={[
{text:"Value 1", value:"value1", selected:false},
{text:"Value 2", value:"value2", selected:false},
{text:"Value 3", value:"value3", selected:false},
{text:"Value 4", value:"value4", selected:false},
{text:"Value 5", value:"value5", selected:false}
]}
getSelectedValue={(data: any) => {
console.log("data", data);
}}
// getData={(data: any) => {
// console.log("data", data);
// }}
/>
</div>
</div>
</div>
);
}
export default App;
packages.json dependencies:
{"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.23",
"@types/node": "^12.20.15",
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.8",
"bootstrap": "^5.0.1",
"mdb-react-ui-kit": "git+https://oauth2:XXXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.3.4",
"web-vitals": "^1.1.2"
}
Am I doing something wrong? Appreciate all the help I can get.
Thanks
ming priority answered 3 years ago
Any updates on this issue? it's pretty inconvenient to use getValue as it returns the text not the option selected, and onchange does not work on MDBSelect.
Wojciech Staniszewski staff commented 3 years ago
The issue with the checkbox has already been fixed. We will fix the return value in the next release. The onChange event should be added within the next month.
Wojciech Staniszewski staff answered 3 years ago
Your version of MDB5 is correct. I see that the error occurs when using the multiple select and click on the checkbox, to select an option. This is a bug and we will fix this in the next release. Thanks for Your report!
Alecta priority answered 3 years ago
Hi,
Thank you for quick response. getValue() works but we noticed some unexpected behaviors in MDBSelect when multiple enabled, or are we doing something we should not? :-)
getValue() returns "text" not "value" as the getSelectedValue() returns for single select.
When trying to select a option and we click exacly on the checkbox, getValue() triggers, but checkbox not checked. After, two, three clicks, it is checked.
getValue() allways triggers twice.
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "mdb-react-ui-kit/dist/css/mdb.min.css";
import "./App.css";
import { MDBSelect } from "mdb-react-ui-kit";
function App() {
return (
<div className="App">
<div className="container">
<div className="col col-lg-12 mt-5">
<MDBSelect
search
searchLabel="Search..."
label={"Label"}
data={[
{text:"Value 1", value:"value1"},
{text:"Value 2", value:"value2"},
{text:"Value 3", value:"value3"},
{text:"Value 4", value:"value4"},
{text:"Value 5", value:"value5"},
{text:"Value 6", value:"value6"},
]}
getSelectedValue={(data: any) => {
console.log("getSelectedValue", data);
}}
/>
</div>
<div className="col col-lg-12 mt-5">
<MDBSelect
search
multiple
searchLabel="Search..."
label={"Label"}
data={[
{text:"Value 7", value:"value7"},
{text:"Value 8", value:"value8"},
{text:"Value 9", value:"value9"},
{text:"Value 10", value:"value10"},
{text:"Value 11", value:"value11"},
{text:"Value 12", value:"value12"},
]}
getValue={(data: any) => {
console.log("getValue", data);
}}
/>
</div>
</div>
</div>
);
}
export default App;
We installed MDB React Pro with following npm command:
npm install git+https://oauth2:XXXXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential --save
And the following version seems to be installed: Version: PRO Essential 1.0.0-beta7 Is this the version you recommend for production or is there another one, and how do we install it?
Many thanks.
Krzysztof Wilk staff answered 3 years ago
Hi!
You can use the getValue()
method to get the multi-select value. We forgot to add it in the documentation, so thanks for reporting that. I'm sorry for the inconvenience :)
Keep coding!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 1.0.0-beta6
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No