React ChakraUI ForwardRef child ignoring variant prop

Viewed 248

I'm having an issue with forwardRef and Input from ChakraUI.

I tried to do a generic input component which has always flushed variant. My problem is Chakra does reset variant to default.

ModalInput Component

import { forwardRef, InputProps, Input } from '@chakra-ui/react';

const ModalInput = forwardRef<InputProps, 'input'>((props, ref) => (
    <Input ref={ref} color="gray.600" variant="flushed" {...props}>
        {props.children}
    </Input>
));

export default ModalInput;

ModalInput Component

<ModalInput placeholder="ex: Entreprise Dupont" />

This way, all my ModalInput should have variant flushed, but you can see on the screenshot below it is outline.

screenshot outline

Thanks for help !

1 Answers

I finally discovered this bug was due to InputGroup, which was enclosing my ModalInput.

Reported this bug here. Find the sandbox here

Related