Comments (4)
First of all, big thank you and your team for Remix Forms.
We've been using Remix Forms with our agency full time now, and we came about quite a few edge cases now that we use it extensively. However, it seems to be the best library of its kind out there. Thanks a ton for creating it! 🙏
Secondly, I cloned the repo on the weekend and tried to fix it, but didn't understand the code well enough. If you have the time, please guide me through the issue, and I will try to create a PR in my evening.
Also, if you can, I'd love to "scratch my own itch" and also address this issue in a PR, if you're okay with it and can provide some high level guidance for that, too.
from remix-forms.
For now, one workaround is to create your own custom InputWrapper
and prevent Remix Forms from passing the false props to the tags:
export const InputWrapper = ({
className,
children,
}: JSX.IntrinsicElements['div']) => <div className={className}>{children}</div>;
which can then be used like this in renderField
:
<>
<Label />
<InputWrapper className="mt-2">
<InputWrapper className="relative rounded-md shadow-sm">
<SmartInput
className={
props.errors &&
'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500 dark:text-red-600/100 dark:ring-red-400 dark:placeholder:text-red-400/70 dark:focus:ring-red-500/80'
}
/>
{props.errors && (
<InputWrapper className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<ExclamationCircleIcon
aria-hidden="true"
className="h-5 w-5 text-red-500 dark:text-red-600"
/>
</InputWrapper>
)}
</InputWrapper>
<Errors />
</InputWrapper>
</>
from remix-forms.
Hey, @janhesters! Thank you for the perfect issue description 👌🏽
The behavior you described is part of what we're trying to figure out with #189. I'll keep that issue for the bigger-picture solution and use yours to fix your specific example.
-
This happens because Remix Forms mistakenly thinks your div is an error component (which is what #189 is mostly about).
-
But even if it thinks it's an error component, it shouldn't pass the
id
androle
props if the field is valid. It's probably a bug on the logic inside this block.
I think this will be a quick fix, and I'll work on it later this week. Unless, of course, you'd like to send a PR :) just let me know, and I can guide you and review it.
from remix-forms.
Thank you, @janhesters!
I don't understand exactly what's happening, but I'm pretty sure it's something between these lines of code.
I would create a test example with a failing test (just like I suggested in #53) and TDD my way to fixing this. Feel free to implement #53 first if you think the path is clearer.
from remix-forms.
Related Issues (20)
- Error: Cannot submit element that is not <form>, <button>, or <input type="submit|image"> HOT 1
- Multiple Checkboxes HOT 3
- Define Input type through fieldTypes HOT 5
- Bring `errorMessagesForSchema` from `domain-functions` to this library HOT 1
- form with mode="onChange" button flashes when it hydrates HOT 2
- Could not resolve "@deepkit/type" HOT 3
- Overriding fields HOT 2
- <Field hidden /> is not passing `type="hidden"` to its input
- Validation error not shown when field is an array
- Can't trigger onSubmit from Form-component HOT 6
- Handle `z.object` HOT 1
- Can remix-forms function within a PWA / client side only context? HOT 4
- Zod schema array of objects HOT 1
- Remix forms site example no longer maintained? HOT 1
- [BUG] Field error(s) not showing if using additional component HOT 1
- Input ID's not always unique when multiple forms are rendered
- Example of how to do crud correctly?
- How to add a reset button on the side of the submit button? HOT 1
- domain-functions deprecated, are you planing to update remix-forms docs HOT 2
- Fix errorMessagesForSchema to work with new InputError second argument (array)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remix-forms.