Closed ParasSolanki closed 9 months ago
Will check it. Thanks for the report
If you want i could create a PR to fix this issue.
$attrs
or const wholeAttrs = useAttrs()
are read-only Proxy(Object) destructuring it will lead it to.. 😭, and we have to turn them to reactive ones with computed or other Vue APIs, but this will double the process and we have no choice
to prevent duplicate classes I thought this way would work, actually, it works but on the first render and without reactivity afterward
const { class: className, ...restOfAttributes } = useAttrs()
since propsDestructure doesn't work with
I wished they were all props and propsDestructure wasn't experimental$attrs
and useAttrs
let's use class
prop for and let $attrs handle other attributes
Yeah since propsDestructure is still experimental we have to use computed
to make it reactive.
Also i have notice that we are using useAttrs() in FormItem, PaginationEllipsis with destructuring so we have to make changes there as well?
I've found this error with Form. When used with Form, Input won't update its validation state. Solved it by removing
defineOptions({
inheritAttrs: false,
})
from Input as it removes the reactivity and bindings from the component (as described in docs here) No clue if it has some unwanted side effects but personally didn't found any.
I've found this error with Form. When used with Form, Input won't update its validation state. Solved it by removing
defineOptions({ inheritAttrs: false, })
from Input as it removes the reactivity and bindings from the component (as described in docs here) No clue if it has some unwanted side effects but personally didn't found any.
It would be helpful if you can provide minimal reproduction (stackblitz/codesandbox). So we can check whats the issue.
I've found this error with Form. When used with Form, Input won't update its validation state. Solved it by removing
defineOptions({ inheritAttrs: false, })
from Input as it removes the reactivity and bindings from the component (as described in docs here) No clue if it has some unwanted side effects but personally didn't found any.
It would be helpful if you can provide minimal reproduction (stackblitz/codesandbox). So we can check whats the issue.
You can see the issue even in the docs under Form.
Any form with validation, when the input validation fails, the aria-invalid
always keeps the initial value.
However, when using a normal html input it works correctly, the aria-invalid changes.
I've noticed it while trying to change Input's style while invalid.
I can create a separate repo that recreates the issue but I don't think it's necessary here. You can even check it just with browser's inspection.
Yeah it is because we are destructuring attrs
and we lose reactivity. When attributes change it does not reflect.
For the solution we have to define class inside props and bind other attributes without destructuring.
Here is the Solution you could use for now. This is latest commit with the same implementation soon it will be fix in live.
Yeah it is because we are destructuring
attrs
and we lose reactivity. When attributes change it does not reflect.For the solution we have to define class inside props and bind other attributes without destructuring.
Here is the Solution you could use for now. This is latest commit with the same implementation soon it will be fix in live.
input-attrs-issue.webm
This works well, great work. Is there any reason why disable inheritAttrs?
Yeah it is because we are destructuring
attrs
and we lose reactivity. When attributes change it does not reflect. For the solution we have to define class inside props and bind other attributes without destructuring. Here is the Solution you could use for now. This is latest commit with the same implementation soon it will be fix in live. input-attrs-issue.webmThis works well, great work. Is there any reason why disable inheritAttrs?
Yeah because by default inheritAttrs
will be true
and it will merge attributes such as "class", "style" etc..
Here we are disabling attribute inheritance because otherwise it will merge attribute and it will be duplicated in input tag and we dont want that. So, by disabling we are taking control of it and binding attribute as we want.
You can take a look at this Vue SFC Playground to understand better.
I hope this explains. Sorry for my bad english.
Environment
Link to minimal reproduction
https://stackblitz.com/edit/8qmftg?file=src%2FApp.vue
Steps to reproduce
pnpm create vue@latest
.pnpm dlx shadcn-vue@latest init
.pnpm dlx shadcn-vue@latest add input
.pnpm run dev
.App.vue
component with Input component fromshadcn-vue
and create password input so when we click on it it changes the type attribute of input tag.const showPassword = ref(false);
But this was not working when i clicked on toggle button it was not toggling the type attribute on input. I was not able to figure out why its not working because the icon was changing but why
type
attribute is not changing?.Then i checked the code of Input component and i found that we are using vue
useAttrs()
composable and grabbing all attributes destructuring theclass
andrest
from it and adding to ourinput
tag.When we destructure the attrs we looses the reactivity and that's why the attribute was not changing.
Expected behavior
The Expected behavior is attrs should be reactive. When it changes it also updates the input attributes.
Solution
We can solve this by using
computed
property. Here is the code for it.Conext & Screenshots (if applicable)
Demo showing that after changing to
computed
property it is working.shadcn-vue-input-demo.webm