@workday/canvas-kit-react/dist/es6/combobox/lib/hooks/useComboboxInput.js

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
import { composeHooks, createElemPropsHook, useForkRef } from '@workday/canvas-kit-react/common';
import { usePopupTarget } from '@workday/canvas-kit-react/popup';
import { useListActiveDescendant } from '@workday/canvas-kit-react/collection';
import { useComboboxModel } from './useComboboxModel';
import { useComboboxInputOpenWithArrowKeys } from './useComboboxInputOpenWithArrowKeys';
import { useSetPopupWidth } from './useSetPopupWidth';
import { useComboboxListKeyboardHandler } from './useComboboxListKeyboardHandler';
/**
 * `useComboboxInput` Adds all attributes necessary to start with a {@link ComboboxInput Combobox.Input}. It opens the
 * menu with arrow keys, uses {@link useListActiveDescendant}, and handles keyboard arrows to
 * navigate items of the menu. You may also compose this hook to add more specific behaviors for
 * your {@link ComboboxInput Combobox.Input}.
 */
export const useComboboxInput = composeHooks(createElemPropsHook(useComboboxModel)((model, ref) => {
    const elementRef = useForkRef(ref, model.state.inputRef);
    React.useEffect(() => {
        if (model.state.cursorId && model.state.visibility === 'visible') {
            const item = model.navigation.getItem(model.state.cursorId, model);
            if (model.state.isVirtualized && item) {
                model.state.UNSTABLE_virtual.scrollToIndex(item.index);
            }
            else {
                const menuItem = document.querySelector(`[id="${model.state.id}-list"] [data-id="${model.state.cursorId}"]`);
                if (menuItem) {
                    requestAnimationFrame(() => {
                        menuItem.scrollIntoView({ block: 'nearest' });
                    });
                }
            }
        }
        // we only want to run this effect if the cursor, visibility and selectedIds change and not any other time
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [model.state.cursorId, model.state.selectedIds, model.state.visibility]);
    return {
        onKeyDown(event) {
            if (event.key === 'Enter' && !event.metaKey && model.state.visibility === 'visible') {
                const element = document.querySelector(`[data-id="${model.state.cursorId}"]`);
                if (element && (element === null || element === void 0 ? void 0 : element.getAttribute('aria-disabled')) !== 'true') {
                    model.events.select({ id: model.state.cursorId });
                    if (model.state.mode === 'single') {
                        model.events.hide(event);
                    }
                }
                // We don't want to submit forms while the combobox is open
                event.preventDefault();
            }
        },
        onBlur(event) {
            // model.events.hide(event);
        },
        onClick(event) {
            if (model.state.visibility === 'hidden') {
                model.events.setWidth(event.currentTarget.clientWidth);
            }
        },
        value: model.state.value,
        role: 'combobox',
        'aria-haspopup': 'listbox',
        'aria-expanded': model.state.visibility === 'visible',
        'aria-autocomplete': 'list',
        'aria-controls': `${model.state.id}-list`,
        'aria-activedescendant': model.state.visibility === 'hidden' ? null : undefined,
        id: model.state.id,
        ref: elementRef,
    };
}), useSetPopupWidth, useComboboxInputOpenWithArrowKeys, useListActiveDescendant, useComboboxListKeyboardHandler, usePopupTarget);