Topic: MDBDropdown isOpen prop does not exist

Rossi20022022 priority asked 2 months ago


I am trying to use isOpen property on dropdown to close the dropdown on click event inside the dropdown buttons. But isOpen property does not exist.

How I can close the dropdown when clicking inside?

https://mdbootstrap.com/docs/react/components/dropdowns/#docsTabsAPI


Stanisław Jakubowski staff answered 2 months ago


Hi!

isOpen property is only responsible for MDBDropdown being open on the first render. This code should render an initially open dropdown with buttons. Dropdown should be closed when the button is clicked. Our dropdown components currently do not accept refs. Thanks for the suggestion, we will consider adding it in the next update!

          <MDBDropdown isOpen>
            <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
            <MDBDropdownMenu>
              <MDBDropdownItem childTag='button' link>
                Action
              </MDBDropdownItem>
              <MDBDropdownItem childTag='button' link>
                Another action
              </MDBDropdownItem>
              <MDBDropdownItem childTag='button' link>
                Something else here
              </MDBDropdownItem>
            </MDBDropdownMenu>
          </MDBDropdown>

Rossi20022022 priority answered 2 months ago


Update: If I call the click event on the MDBDropdownToggle element it will close/open every time. How I can pass ref to the toggle element. It saying: _Function components cannot be given refs. Attempts to access this ref will fail.

I am seeing that the MDBDropdown components are not using forwardRef. Do you plan to add it?



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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 4.2.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags