thekaganugur / formik-chakra-ui Goto Github PK

View Code? Open in Web Editor NEW

144.0 144.0 26.0 3.11 MB

Chakra-UI bindings for Formik

License: MIT License

HTML 1.51% TypeScript 98.49%

chakra-ui formik

formik-chakra-ui's People

Contributors

Stargazers

Watchers

formik-chakra-ui's Issues

No longer able to select by label text with React Testing library

Hello.

Steps to reproduce:

Have formik-chakra-ui at version 1.4.1
Clone my minimum example repo from https://github.com/PedroDBFlores/chakra-ui-formik-problem
Run the tests with the current 1.4.1 version

Expected result:
Both tests should pass

Actual result:
I'm no longer able to get the selector by using the label which is labeling it.

I've checked the recent commits, might the id removal from the SelectControl have something to do with it? This might also break accessiblity by not being able to use aria-label on the select label.

Export the base form control component

I know this library is for Chakra UI only, but I would like to use other input types as well. For example I would like to extend this library to support @choc-ui/chakra-autocomplete and it would be easier if I had access to BaseProps and modified FormControl.

Radio Group Button not updating its value

Discovered this issue with @chakra-ui/react": "1.1.0", the radio group buttons won't update its value upon selection.

This problem does not occur with version 1.0.3 as in your sandbox example.

<RadioGroupControl name="favoriteColor" label="Favorite Color" > <Radio value="#ff0000">Red</Radio> <Radio value="#00ff00">Green</Radio> <Radio value="#0000ff">Blue</Radio> </RadioGroupControl>

pass props only to input on InputControl

I'm trying to pass in a background color to the input, how can I make sure only the input receives it? bg="white"

const inputProps = {
    bg: "white"
  };

<InputControl {...inputProps} />

Not possible to pass a specific type (eg: "password") in the ```InputControl```.

Hello,
thanks a lot for this lib !
I'm trying it and i cant add a password type for the inputControl.
Like this :

<InputControl type="password" name="password" label="password" />

There is a Typescript error :

Property 'type' does not exist on type 'IntrinsicAttributes & BaseProps & { inputProps?: InputProps | undefined; } & { children?: ReactNode; }'

It's possible to do it on Chakra :

`function PasswordInput() {
const [show, setShow] = React.useState(false)
const handleClick = () => setShow(!show)

return (

<Input
pr="4.5rem"
type={show ? "text" : "password"}
placeholder="Enter password"
/>

{show ? "Hide" : "Show"}

)
}`

Thanks a lot !

How do I disable autocomplete?

I need to disable autocomplete but I can't

<InputControl name="email" label="Email" inputProps={{ type: "email",name:"email", autoComplete:"off" ,placeholder:"[email protected]"}} />

PinController does not render correctly

https://codesandbox.io/s/formik-chakra-ui-forked-odnwl?file=/src/Form.tsx

PinController does not render correctly, the node rendered by children is always null.

Thank you for making this library

I know issues are not really for this, but thank you very much for this library. It reduces boilerplate so much!

If you need help from the community to maintain it, make sure to let us know. In the Readme or with a pinned issue for instance. Since the project is pretty small, it should be relatively easy for people to jump in and help if needed.

Cheers, and thanks again.

Remove default marginY value?

Hi @kgnugur and thanks for making my life a bit easier with this lib 😄
I decided to open a new issue on this to continue the discussion from #9. I would like the my={4} setting to be removed as well, since it eases the transition from plain Chakra UI components and users can still pass it if they want to. One might argue that a user may also pass my={0} to every component (which is what I do right now), but generally, I think, it is better practice to use a Grid with rowGap={8} for this kind of styling. My opinion though, and your opinionated lib 😉

Add support for attribute autocomplete

Hello,

I just started with your project and am enjoying it. Thank you.

When I add the attribute autocomplete it does not work correctly.

<InputControl autocomplete="street-address" name="address_1" label="Address" />

Chakra Ui does work.

<Input autocomplete="street-address" />

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

facing issue inputcontrol when I use useRefs hook

facing problem while changing font size of Inputcontrol

by default label using this fontSize I am not able to change this.

[QUESTION] InputLeftElement/InputRightElement with an IconButton

Hello,

I wanted to first start off by saying thank you for creating this wonderful and great package 🙌🏻

I was wondering if there is a way to implement Chakra UI's InputLeftElement/InputRightElement with an IconButton within your InputControl 🤔

Basically I would love to recreate this Chakra Pro: Login with centred form (Password Field) component to work with Formik!

Thank,
Donald Louch, CEO and Founder of DevLexicon

Non-unique id's when using CheckboxContainer

Hello Kağan! I found a small bug detailed below 😁

Steps to reproduce

<CheckboxContainer name="toppings" label="Toppings">
  <CheckboxControl name="toppings" value="cheese">
    🧀 Cheese
  <CheckboxControl name="toppings" value="pineapple">
    🍍 Pineapple
  </CheckboxControl>
</CheckboxContainer>

Expected behaviour

The id attribute should be unique for the whole document. Therefore the same id can't be used on all the checkboxes within a CheckboxControl.

Current behaviour

All CheckboxControl's within a CheckboxContainer use the same id.

Environment

Version: 1.2.6

Let me know if you need any more info or help solving it
Best regards Hugo

'Radio' is not exported from 'formik-chakra-ui'

The docs's Radio section import "Radio" from "formik-chakra-ui", but attempt to use Radio from this library does not work. The 'Radio' is not exported from 'formik-chakra-ui' error appears

when u type e on number input control and then focus out - value coming aria-valuemax="9007199254740991" n m not able to override

RecordedVideo.1.webm

Why Input Control is wrapped with formcontrol , due that i am not able use inputLeftElement

Placeholder not working while doing TextAreaControl and InputControl

For example while doing this -

 <TextareaControl
    name="text"
    placeholder="Add your comment..."
    bg={bg}
    pt={0}
    mt={0}
    isDisabled={!data?.Me.user}
    />

The placeholder isn't visible or even present in there while checking with inspect tools.

Formik - 2.2.6
Chakra UI - 1.3.3
formik-chakra-ui - 1.4.3

ps - thanks for this library, it saves much time and complexity

Type Of input element not working

customize Radio button

Hey, I want to use the following example of Radio buttons with formik
https://chakra-ui.com/docs/form/radio#custom-radio-buttons

I understand that I would need to use hooks to achieve this, but should the group property go into RadioControlGroup?

A followup question, my form has 4 radio buttons; that's a lot of hooks for a single page. Is there any other way to use custom radio buttons? I'm new to react and am not completely sure how to go about this

[SUGGESTION] Create a File Control component

import React, { ChangeEvent, ForwardedRef, useRef } from 'react'
import { EditIcon } from '@chakra-ui/icons'
import { Button, ButtonProps, InputGroup } from '@chakra-ui/react'
import { useField } from 'formik'

import { SUPPORTED_FORMATS } from 'utils/yup'

import FormControl, { BaseProps } from '../FormControl'

type FileUploadProps = {
  accept?: string
  multiple?: boolean
}

export type FileControlProps = BaseProps & FileUploadProps & { buttonProps?: ButtonProps };

export const FileControl: React.FC<FileControlProps> = React.forwardRef(
  (props: FileControlProps, ref: ForwardedRef<HTMLInputElement>) => {
    const { name, label, buttonProps, multiple = false, accept = SUPPORTED_FORMATS.join(' ,'), ...rest } = props
    const [{ onChange, ...field }, , { setValue }] = useField(name)
    const inputRef = useRef<HTMLInputElement | null>(null)

    const handleClick = () => {
      inputRef.current?.click()
    }

    const handleChange = (value: ChangeEvent<HTMLInputElement>) => {
      value.target.files && setValue(value.target.files?.[0])
    }

    return (
      <FormControl name={name} label={label} {...rest} {...ref}>
        <InputGroup onClick={handleClick}>
          <input
            onChange={handleChange}
            type='file'
            accept={accept}
            multiple={multiple}
            id={name}
            ref={inputRef}
            hidden />
          <Button w={'full'} variant={'secondary'} {...buttonProps} {...field} leftIcon={<EditIcon />} isLoading={false} paddingX={24}>
            {'Adjuntar'}
          </Button>
        </InputGroup>
      </FormControl>
    )
  }
)

export default FileControl

[SUGGESTION] Allow components to accept a `Fields` generic for name auto-completion

Allow the control components to accept a Fields type argument, similarly to the how the Formik component does in base Formik. The Fields generic would be a Record that would contain the all the valid fields and corresponding data types. This could then provide auto-completion for the name prop since every field would need to have a name that is a key of Fields.

Radio Control Buttons does not show validation error

Back with another issue, this time I noticed that the error message from validation does not appear after clicking submit.

Support for FormHelperText

And here it is, another "Someone approaches you with a new use case that your code doesn't quite support, but could with a little tweak." step. Do whatever you want with the suggestion 😜

As the title says, I'd welcome support for FormHelperText. Happy to do a PR if you want. I'd implement it by adding a helperText prop to your FormControl component. Looking forward to your feedback :)

NumberInputControl parse the string value to number before set the form value

Currently, the NumberInputControl sets the FieldValue as a string. it would be good if it parses the string to a number before sets the FieldValue

Upload file

Hi, is there a way to upload a file using InputControl? If no may you please tell me how? I am using your example I need only to add an input file to upload image

Bug: missing ref type

Hi, I was trying to use refs with your component, but Typescript complains that there is no such prop as ref on any of your components. When I looked at the code I could see that you are explicitly typing them as Functional Components, instead of letting Typescript infer the correct type from the forwardRef function. Could you remove these explicit types?

<CheckboxSingleControl name="hello" label="Hello" />

But currently it must have children to pass TS check:

<CheckboxSingleControl name="hello">
  Hello
</CheckboxSingleControl>