Bootstrap menu closes with using "React Select"
I am using React Select and when we tap on an item from dropdown it also closes bootstrap menu.
Replies (6)
Hi,
Could you please specify which Metronic version are you using?
Could you attach HTML code of your dropdown so we can test it on our side?
Also, if you have any errors in your browser console please attach them.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
My name is Martijn the owner off S4YCH33SE.
Thank for your reply and offering help with an issue our our developer Hunnain is facing right now.
Is there any update on the issue at hand. Have you been able to check the code supplied by Hunnain.
It seems this issue is kind of blocking a few things in our development roadmap.
thank you in advance
Martijn
Hi Martijn,
Sorry for the late reply.
We checked code provided by Hunnain, since react-select dropdown is added when you click on input item and it gets removed right after value is selected this element is not counted as children of our menu instance.
To fix this you can add a wrapper for your select elements with a click event which will stop event propagation.
<div onClick={(event) => {
event.stopPropagation();
}}>
<Select
defaultValue={colourOptions[0]}
options={colourOptions}
...
/>
</div>Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you for your reply and your solution ;)
Will discuss with Hunnain.
Enjoy the rest of your day!
Hello!
I'm using React Demo 3 - Metronic 8
import React from "react"
import Select from "react-select"
interface ColourOption {
readonly value: string;
readonly label: string;
readonly color: string;
readonly isFixed?: boolean;
readonly isDisabled?: boolean;
}
const colourOptions: readonly ColourOption[] = [
{ value: "ocean", label: "Ocean", color: "#00B8D9", isFixed: true },
{ value: "blue", label: "Blue", color: "#0052CC", isDisabled: true },
];
export function Dropdown1() {
return (
<div className="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true">
<div className="px-7 py-5">
<div className="fs-5 text-dark fw-bolder">Filter Options</div>
</div>
<div className="separator border-gray-200"></div>
<div className="px-7 py-5">
<div className="mb-10">
<label className="form-label fw-bold">Status:</label>
<div>
<Select
data-kt-select2="true"
menuIsOpen={true}
data-placeholder="Select option"
data-allow-clear="true"
defaultValue={colourOptions[0]}
isClearable
styles={{ menuPortal: (base) => ({ ...base, zIndex: 10001 }) }}
menuPortalTarget={document.body}
isSearchable
name="color"
menuPosition={"absolute"}
menuPlacement={"top"}
options={colourOptions}
menuShouldScrollIntoView={false}
/>
<select
className="form-select form-select-solid"
data-kt-select2="true"
data-placeholder="Select option"
data-allow-clear="true"
defaultValue={"1"}
>
<option></option>
<option value="1">Approved</option>
<option value="2">Pending</option>
<option value="3">In Process</option>
<option value="4">Rejected</option>
</select>
</div>
</div>
<div className="mb-10">
<label className="form-label fw-bold">Member Type:</label>
<div className="d-flex">
<label className="form-check form-check-sm form-check-custom form-check-solid me-5">
<input className="form-check-input" type="checkbox" value="1" />
<span className="form-check-label">Author</span>
</label>
<label className="form-check form-check-sm form-check-custom form-check-solid">
<input className="form-check-input" type="checkbox" value="2" defaultChecked={true} />
<span className="form-check-label">Customer</span>
</label>
</div>
</div>
<div className="mb-10">
<label className="form-label fw-bold">Notifications:</label>
<div className="form-check form-switch form-switch-sm form-check-custom form-check-solid">
<input
className="form-check-input"
type="checkbox"
value=""
name="notifications"
defaultChecked={true}
/>
<label className="form-check-label">Enabled</label>
</div>
</div>
<div className="d-flex justify-content-end">
<button
type="reset"
className="btn btn-sm btn-light btn-active-light-primary me-2"
data-kt-menu-dismiss="true"
>
Reset
</button>
<button type="submit" className="btn btn-sm btn-primary" data-kt-menu-dismiss="true">
Apply
</button>
</div>
</div>
</div>
)
}
