Firefox tabIndex problem when using open prop

[avazhenin]

Describe the bug Using react date picker with open prop, causes strange tabIndex behavior in FireFox browser. Video and Codesandbox attached.

To Reproduce Steps to reproduce the behavior: https://codesandbox.io/p/sandbox/react-datepicker-example-forked-24w5sd

Expected behavior Tab button behavior work as expected, same as in GoogleChrome ( watch in video )

Video https://drive.google.com/file/d/1yIQKGIr6MHaDInJKruGQErJUkAm833EV/view?usp=drive_link

Desktop (please complete the following information):

• OS: MacOs Sonoma 14.5
• Browser [GoogleChrome 128.0, FireFox 129.0.2]

Additional context "react": "16.8.4", "react-datepicker": "^7.3.0", "@types/react-datepicker": "^7.0.0",

Same behavior with previous versions of react-datepicker

[balajis-qb]

Hi, I couldn't access the video you shared. Could you make it public? so that we can understand the issue.

[avazhenin]

My appologies, https://drive.google.com/file/d/1yIQKGIr6MHaDInJKruGQErJUkAm833EV/view

[avazhenin]

Any updates?

[samajudia]

I am also facing same issue i got workaround but it is not a rigid solution

const isFirefox = typeof InstallTrigger !== 'undefined';
  if (isFirefox) {
    // Apply Firefox-specific logic
    if (key === 'Tab') {
      e.preventDefault(); // prevent the current event
      if (ref?.current) {
        ref.current.setOpen(false);
        // Find the next focusable element manually
        setTimeout(() => {
          const allFocusableElements = document.querySelectorAll('input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])');
          console.log('Array.from(allFocusableElements) ',Array.from(allFocusableElements)); // List all focusable elements
          const currentIndex = Array.from(allFocusableElements).indexOf(e.target);
          console.log('currentIndex ',currentIndex); // List all focusable elements
          if (shiftKey) {   
            if (currentIndex > 0) {
              allFocusableElements[currentIndex - 1].focus();
            }
          } else {
            if (currentIndex !== -1 && allFocusableElements[currentIndex + 1]) {
              allFocusableElements[currentIndex + 1].focus(); // Move focus to the next input
            }
          }
        }, 0); // Delay to ensure the current element is blurred before focus moves
      }
    }
  }
  

[balajis-qb]

Hi @avazhenin, Sorry for the late reply. I started working on the fix. I'll raise a PR by this Monday. Once the fix got merged you'll get an update. Thank you