open-wc / form-participation Goto Github PK
View Code? Open in Web Editor NEWHelper, mixins, tools, and more for supporting your custom elements in participating in an ancestor form.
License: MIT License
Helper, mixins, tools, and more for supporting your custom elements in participating in an ancestor form.
License: MIT License
One of my devs got an error today about an attribute property not existing on a validator object.
The error came from this line:
https://github.com/open-wc/form-participation/blob/main/packages/form-control/src/FormControlMixin.ts#L39
Which seems to be coded as if the attribute key in the validator object is required, but its typed as optional in the TS typing. IMO it should be optional, so should we do an existence check on the .attribute
prop in that map function?
When I set up a new vite project using the lit-ts
template, and using this component while installing @open-wc/form-control
I am getting the following error.
Uncaught (in promise) Error: The following properties on element fd-input will not trigger updates as expected because they are set using class fields: value. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.
at Input.performUpdate (reactive-element.ts:1275:17)
at Input.scheduleUpdate (reactive-element.ts:1234:17)
at Input.__enqueueUpdate (reactive-element.ts:1206:25)
The component works just fine as it does in this Demo
The app is just showing nothing instead and throws the above mentioned error
As far as I see currently we are not able to set custom async validators. Do you have a design decision to stick to sync validators or is it just ok for adding async support with a PR?
I'm trying to use my components with Lit SSR, but the ones using FormControlMixin cause this error:
TypeError: this.attachInternals is not a function
Is there anything I could do to prevent this?
The FormControlMixin
currently exposes the setValue
method as a public method on elements that use the mixin. When using the FormControlMixin
to build a published component for other teams to use, this can lead to confusion when consuming teams use TypeScript. Since setValue
is public
it appears as though it is intended for direct use by said consuming teams.
This misunderstanding may cause improper usage patterns and bypasses the intended abstractions we've designed for managing state and interactions within form control elements.
Changing setValue
from a public
method to a protected
method would be ideal on our end. However, I understand this might not be ideal on your end. We're open to other potential solutions as well.
i saw a example using formControlValidationGroup
now i checked the code and the history on formControlValidationGroup there was a pr from @calebdwilliams
but i dont think there is any current implementation using formControlValidationGroup
was this intentionaly?
is there a work around for this so you can validate radio input groups?
if not ill see if i can help with a implemention to put it back in
it use to be added with this pr #12
i also see formValidationGroup
still in there
Looks like starting in React 17 generated events require the bubbles prop to be set for proper handling.
https://reactjs.org/blog/2020/08/10/react-v17-rc.html#changes-to-event-delegation
Reference discovered in this stack post https://stackoverflow.com/questions/51026510/react-ref-form-onsubmit-handler-not-triggered/66659749#66659749
I came across this while investigating issues I was having with form submission event handling when triggered by child web components with in the shadow dom.
Setting the 'bubbles' prop on the event solved the issue and allowed for proper event handling by react triggering form control and expected onsubmit behavior.
Adding this to
should improve compatibility.We're having issues in React. Controls seem to get associated fine outside of React, but within a React app the control never seems to get associated with the form?
The internals seem to recognize the form and everything works like normal, but the FormData pulled from the form in React doesn't properly contain the web component control's name and value?
Curious if anyone else has run into this? I'll try to get an example recreation online soon.
The calls to addEventListeners in the element's constructor break Lit SSR compatibility.
Could these be moved to the connectedCallback
?
connectedCallback() {
super.connectedCallback();
this.addEventListener?.('focus', this.#onFocus);
this.addEventListener?.('blur', this.#onBlur);
this.addEventListener?.('invalid', this.#onInvalid);
}
Alternatively, perhaps provide a method we can override to inform the mixin if it is being rendered on a server at the moment but in a library agnostic way:
protected isServer() {
return false;
}
constructor(...args: any[]) {
super(...args);
if (!this.isServer()) {
this.addEventListener?.('focus', this.#onFocus);
this.addEventListener?.('blur', this.#onBlur);
this.addEventListener?.('invalid', this.#onInvalid);
}
this.setValue(null);
}
So then in a Lit element we could just override:
import {isServer} from 'lit';
// ...
protected isServer() {
return isServer;
}
All of the other @open-wc
packages we leverage are published with the "type": "module"
package.json configuration. Is there any reason why @open-wc/form-control
specifically is not considering @open-wc/form-helpers
is? It has just caused some strange build errors that might prevent us from leveraging it.
When I submit a <form/>
, I'd like to know which element submitted the form.
In native HTML, I have access to the element that submitted the form via event.submitter
Read more about the event.submitter spec here
Example:
// JS
document
.querySelector("form")
.addEventListener("submit", (event) => {
let submitter = event.submitter;
});
// HTML
<form>
<button name='FirstButton' value='FirstValue'>First</button>
<button name='SecondButton' value='SecondValue'>Second</button>
</form>
Expected:
event.submitter should be a reference to the DOM node
Received:
event.submitter is null
I'm using this library to build a form that consist on a custom input and a custom submit button. Submit button uses submit
helper from form-helpers
. I expect that submitting form directly without making any change should trigger form validation, block form submit and show error messages. But;
submit
helper doesn't call submit. It only calls reportValidity
of form. But as far as I see, form's reportValidity
doesn't call our custom inputs' reportValidity
methods. So form submission is being blocked but no errors shown.reportValidity
method but since submit event doesn't happen with submit
helper, it doesn't help as well. (This works with native <button type="submit">
)validityCallback
is not called if there is no use interaction (like initial state). I have an input like <my-input required>
and if user immediately submits the form, required validator of the component doesn't work. Because validityCallback
doesn't work, I can not override default error message in this case.It would be great to have a comprehensive form example that has custom input and custom form submit button both uses this library and shows default or custom error messages once form is submitted.
I tried to demonstrate the issue but couldn't manage it easily in a playground (setup needs some considerable time). But if it's difficult to understand the issues I explained, I can spend more time to show an example.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.