Add missing ref to IconInput

This commit is contained in:
Alejandro Celaya 2023-03-13 18:18:35 +01:00
parent 2b14c49c80
commit 3be5126e2d

View file

@ -2,25 +2,27 @@ import type { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames'; import classNames from 'classnames';
import type { FC } from 'react'; import type { FC } from 'react';
import { useRef } from 'react';
import type { InputProps } from 'reactstrap'; import type { InputProps } from 'reactstrap';
import { Input } from 'reactstrap'; import { Input } from 'reactstrap';
import { useElementRef } from './helpers/hooks';
import './IconInput.scss'; import './IconInput.scss';
type IconInputProps = InputProps & { icon: IconProp }; type IconInputProps = InputProps & {
icon: IconProp;
};
export const IconInput: FC<IconInputProps> = ({ icon, className, ...rest }) => { export const IconInput: FC<IconInputProps> = ({ icon, className, ...rest }) => {
const ref = useRef<{ input: HTMLInputElement }>(); const ref = useElementRef<HTMLInputElement>();
const classes = classNames('icon-input-container__input', className); const classes = classNames('icon-input-container__input', className);
return ( return (
<div className="icon-input-container"> <div className="icon-input-container">
<Input className={classes} {...rest} /> <Input className={classes} innerRef={ref} {...rest} />
<FontAwesomeIcon <FontAwesomeIcon
icon={icon} icon={icon}
fixedWidth fixedWidth
className="icon-input-container__icon" className="icon-input-container__icon"
onClick={() => ref.current?.input.focus()} onClick={() => ref.current?.focus()}
/> />
</div> </div>
); );