#2651: TextAutoCompletion.jsx

Code Structure

Imports from: ../../popper/AdvancedPopperInput, ./index, prop-types, react

Has PropTypes for: TextAutoCompletion

Source Code (abridged)

import PropTypes from 'prop-types';
import React from 'react';
import AdvancedPopperInput from '../../popper/AdvancedPopperInput';
import AutoCompletion from './index';

function TextAutoCompletion(
    {
        inputId,
        inputProps,
        onChange,
        onSelect,
        value = '',
        focus = false,
        ...props
    },
) {
    const handleChange = ({ target }) => onChange(target.value);

    const handleSelect = (completion) => {
        if (onSelect) {
            onSelect(completion);
        } else {
            onChange(completion);
        }
    };

    return (
        <AutoCompletion
            /* eslint-disable-next-line react/no-unstable-nested-components */
            input={({ ref, ...otherInputProps }) => (
                <AdvancedPopperInput
                    forwardRef={ref}
                    id={inputId}
                    autoFocus={focus}
                    {...otherInputProps}
                    {...inputProps}
                    onChange={handleChange}
                />
            )}
            onSelect={handleSelect}
            search={value}
            {...props}
        />
    );
}

TextAutoCompletion.propTypes = {
    inputId: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    inputProps: PropTypes.shape({}),
    onSelect: PropTypes.func,
    value: PropTypes.string,
    focus: PropTypes.bool,
};

export default TextAutoCompletion;

Git History

3685edd6c lift to react 18 wip
253b9f38b update some deps and fix eslint errors
f3010d108 fix eslint
3d8496b1c GitHub #121: TextAutoCompletions supports now autoFocus.
2061b1a1f wip: new user and employee select