Topic: Datepicker toggleInput doesn't work with keyboard navigation

tgolen priority asked 1 day ago


Expected behavior When using the inputToggle option, and giving the input focus using the tab key, the datepicker should open.

Actual behavior The date picker does not open. It only opens if you use the mouse to click on the input field to give it focus.

Resources (screenshots, code snippets etc.)


Mateusz Lazaru staff answered 22 hours ago


The expected behavior for option inputToggle is to open the picker whenever the input is clicked, not focused.

It takes to add some code to make it work as you're expecting.

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

export default function App() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const handleFocus = () => {
      setOpen(true);
    };

    const input = document.querySelector('.datepicker input');
    input?.addEventListener('focus', handleFocus);

    return () => {
      input?.removeEventListener('focus', handleFocus);
    };
  }, []);

  return <MDBDatepicker open={open} inputToggle onClose={() => setOpen(false)} />;
}


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: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 9.0.0
  • Device: Macbook Pro
  • Browser: Chrome
  • OS: OSx
  • Provided sample code: No
  • Provided link: No