Merge pull request #397 from uvarov-frontend/fix/tab_key_for_inputMode

Fix inputMode true and TAB key and arrow navigation

Author: uvarov-frontend

package/src/scripts/handles/handleInput.ts

@@ -2,6 +2,7 @@ import createToInput from '@scripts/creators/createToInput';
 import { show } from '@scripts/methods';
 import canOpenOnFocus from '@scripts/utils/canOpenOnFocus';
 import setContext from '@scripts/utils/setContext';
+import { clearSkipOpenOnFocus, shouldSkipOpenOnFocus } from '@scripts/utils/skipOpenOnFocus';
 import type { Calendar } from '@src/index';
 
 const handleInput = (self: Calendar) => {
@@ -20,6 +21,10 @@ const handleInput = (self: Calendar) => {
   const shouldHandleFocus = typeof self.openOnFocus === 'function' || self.openOnFocus === true;
 
   const handleOpenOnFocus = () => {
+    if (shouldSkipOpenOnFocus(self)) {
+      clearSkipOpenOnFocus(self);
+      return;
+    }
     if (!canOpenOnFocus(self)) return;
     handleOpenCalendar();
   };
@@ -28,12 +33,46 @@ const handleInput = (self: Calendar) => {
     (self.context.inputElement as HTMLInputElement).addEventListener('focus', handleOpenOnFocus);
   }
 
+  const focusIntoCalendar = (event: KeyboardEvent) => {
+    if (!self.context.isShowInInputMode) return false;
+    if (document.activeElement !== self.context.inputElement) return false;
+
+    const isFocusable = (el: HTMLElement) => el.tabIndex >= 0 && !el.hasAttribute('disabled') && el.getAttribute('aria-disabled') !== 'true';
+
+    const walker = document.createTreeWalker(self.context.mainElement, NodeFilter.SHOW_ELEMENT, {
+      acceptNode: (node) => {
+        const el = node as HTMLElement;
+        if (!isFocusable(el)) return NodeFilter.FILTER_SKIP;
+        return NodeFilter.FILTER_ACCEPT;
+      },
+    });
+
+    const focusTarget = (walker.nextNode() as HTMLElement | null) ?? (isFocusable(self.context.mainElement) ? self.context.mainElement : null);
+
+    if (!focusTarget || focusTarget.tabIndex < 0) return false;
+
+    event.preventDefault();
+    focusTarget.focus();
+    return true;
+  };
+
+  const handleKeyIntoCalendar = (event: KeyboardEvent) => {
+    const isTab = event.key === 'Tab' && !event.shiftKey;
+    const isArrow = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key);
+    if (!isTab && !isArrow) return;
+    focusIntoCalendar(event);
+  };
+
+  (self.context.inputElement as HTMLInputElement).addEventListener('keydown', handleKeyIntoCalendar);
+
   return () => {
     (self.context.inputElement as HTMLInputElement).removeEventListener('click', handleOpenCalendar);
 
     if (shouldHandleFocus) {
       (self.context.inputElement as HTMLInputElement).removeEventListener('focus', handleOpenOnFocus);
     }
+
+    (self.context.inputElement as HTMLInputElement).removeEventListener('keydown', handleKeyIntoCalendar);
   };
 };
 

package/src/scripts/methods/hide.ts

@@ -1,17 +1,26 @@
 import setContext from '@scripts/utils/setContext';
+import { setSkipOpenOnFocus } from '@scripts/utils/skipOpenOnFocus';
+import { disableTabbing } from '@scripts/utils/toggleTabbing';
 import type { Calendar } from '@src/index';
 
 const hide = (self: Calendar) => {
   if (!self.context.isShowInInputMode || !self.context.currentType) return;
 
   self.context.mainElement.dataset.vcCalendarHidden = '';
   setContext(self, 'isShowInInputMode', false);
+  if (self.inputMode) disableTabbing(self.context.mainElement);
 
   if (self.context.cleanupHandlers[0]) {
     self.context.cleanupHandlers.forEach((cleanup) => cleanup());
     setContext(self, 'cleanupHandlers', []);
   }
 
+  if (self.inputMode && self.context.inputElement && self.context.mainElement.contains(document.activeElement)) {
+    const shouldHandleFocus = typeof self.openOnFocus === 'function' || self.openOnFocus === true;
+    if (shouldHandleFocus) setSkipOpenOnFocus(self);
+    self.context.inputElement.focus();
+  }
+
   if (self.onHide) self.onHide(self);
 };
 

package/src/scripts/methods/show.ts

@@ -1,6 +1,7 @@
 import hide from '@scripts/methods/hide';
 import setPosition from '@scripts/utils/positions/setPosition';
 import setContext from '@scripts/utils/setContext';
+import { restoreTabbing } from '@scripts/utils/toggleTabbing';
 import type { Calendar } from '@src/index';
 
 const show = (self: Calendar) => {
@@ -13,6 +14,7 @@ const show = (self: Calendar) => {
 
   setContext(self, 'cleanupHandlers', []);
   setContext(self, 'isShowInInputMode', true);
+  if (self.inputMode) restoreTabbing(self.context.mainElement);
   setPosition(self.context.inputElement, self.context.mainElement, self.positionToInput);
   self.context.mainElement.removeAttribute('data-vc-calendar-hidden');
 

package/src/scripts/utils/skipOpenOnFocus.ts

@@ -0,0 +1,13 @@
+import type { Calendar } from '@src/index';
+
+const skipOpenOnFocus = new WeakSet<Calendar>();
+
+export const shouldSkipOpenOnFocus = (self: Calendar) => skipOpenOnFocus.has(self);
+
+export const setSkipOpenOnFocus = (self: Calendar) => {
+  skipOpenOnFocus.add(self);
+};
+
+export const clearSkipOpenOnFocus = (self: Calendar) => {
+  skipOpenOnFocus.delete(self);
+};

package/src/scripts/utils/toggleTabbing.ts

@@ -0,0 +1,42 @@
+const PREV_TABINDEX_ATTR = 'data-vc-prev-tabindex';
+
+const isFocusable = (el: HTMLElement) => el.tabIndex >= 0 && !el.hasAttribute('disabled') && el.getAttribute('aria-disabled') !== 'true';
+
+const storePrevTabIndex = (el: HTMLElement) => {
+  if (el.hasAttribute(PREV_TABINDEX_ATTR)) return;
+  const prev = el.getAttribute('tabindex');
+  el.setAttribute(PREV_TABINDEX_ATTR, prev ?? '');
+};
+
+const restorePrevTabIndex = (el: HTMLElement) => {
+  if (!el.hasAttribute(PREV_TABINDEX_ATTR)) return;
+  const prev = el.getAttribute(PREV_TABINDEX_ATTR);
+  if (prev === '' || prev === null) {
+    el.removeAttribute('tabindex');
+  } else {
+    el.setAttribute('tabindex', prev);
+  }
+  el.removeAttribute(PREV_TABINDEX_ATTR);
+};
+
+export const disableTabbing = (root: HTMLElement) => {
+  if (isFocusable(root)) {
+    storePrevTabIndex(root);
+    root.tabIndex = -1;
+  }
+
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => (isFocusable(node as HTMLElement) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP),
+  });
+
+  while (walker.nextNode()) {
+    const el = walker.currentNode as HTMLElement;
+    storePrevTabIndex(el);
+    el.tabIndex = -1;
+  }
+};
+
+export const restoreTabbing = (root: HTMLElement) => {
+  restorePrevTabIndex(root);
+  root.querySelectorAll<HTMLElement>(`[${PREV_TABINDEX_ATTR}]`).forEach(restorePrevTabIndex);
+};