comigotech / react-input-mask

Input masking component for React. Made with attention to UX.
MIT License
20 stars 3 forks source link

Error when using child input #8

Open ianchanning opened 2 years ago

ianchanning commented 2 years ago

I'm guessing this is a problem because I'm using a child tailwindcss Input element, but when I try your code I get the following error:

TypeError: input is null

When I open up the code it points to it show's here:

    var input = getInputElement();
    input.addEventListener("focus", runSelectionLoop);
    input.addEventListener("blur", stopSelectionLoop);

Which is in: node_modules/comigo-tech-react-input-mask/lib/react-input-mask.development.js

ianchanning commented 2 years ago

My guess is because this sub-child relies on the findDOMNode(ref) that you removed: https://github.com/comigotech/react-input-mask/commit/a3b3f76309dab87a113852874aa2e6bd5b7f4ba1#diff-bfe9874d239014961b1ae4e89875a6155667db834a410aaaa2ebe3cf89820556L271

Removing it should have been the correct solution and that's why I tried this to get rid of the findDOMNode warning - but it seems to then break my use case :(

ianchanning commented 2 years ago

This is the code I use:

                            <InputMask
                                mask="99/99/9999"
                                maskPlaceholder="_"
                                {...getNativeInputProps('birthDate')}
                            >
                                <Input
                                    id="birthDate"
                                    placeholder="dd/mm/yyyy"
                                />
                            </InputMask>
atocqueville commented 2 years ago

@ianchanning Are you using the v3 in beta or the v2 ? Because your syntax is correct only on the v3.

V2 uses render props to render the child element

ianchanning commented 2 years ago

Yeah, I'm using 3.0.0-alpha.2 in the original package and 3.0.0-alpha.3 in your package

danielweil commented 2 years ago

I also tried to use your fork and got the same error when using child components using v3 syntax.

Went back to original library until this gets fixed.