Hello,
The documentation indicates that defaultValue can be used on input fields to set up an uncontrolled property. Unfortunately, this does not work.
Reproduction:
<s-text-field label="Example" defaultValue="Initial value"/>
End result:
Thanks.
Hey yeah - I thought we had some docs on this but I can’t seem to find them at the moment, so sorry about the confusion here.
It all depends on whether you’re using the web components in HTML or in P/React;
If you’re using them in HTML, then you use the value attribute (which maps to the defaultValue property). This is confusing, but also matches how the web does it.
<s-text-field value="Initial value"></s-text-field>
If you’re using P/React, they set the property on the element (even if JSX looks like you’re setting attributes), so you need to explicitly use defaultValue in that case.
<s-text-field defaultValue="Initial value"/>
Here’s an article from Jake Archibald that helps with understanding the relation between properties and attributes that’s been useful. HTML attributes vs DOM properties - JakeArchibald.com
Hello @Anthony_Frehner ,
Thanks, this is interesting (and confusing!). However, it seems I have a few issues with the defaultValue on React 19 (seems to work properly on React 18).
In React 19, even if I set a defaultValue, it will sometimes reflect, sometimes not (I’m trying to integrate with the RVF library): https://www.rvf-js.io/
There is apparently a SSR issue on React 19. To reproduce this issue, simply adds a s-text-field with a default value:
This issue causes from the default value to not appear:
There is a lot of discrepencies between React 18 and React 19. For instance in React 19, events like onChange won’t work (you must write them in all lowercase ; onchange). But React 18 has a bunch of other issues that React 19 solves.
I think we should aim to React 19 right now so it would be best if the library could be tested mainly on React 19.
@Anthony_Frehner , I’m trying to integrate with RVF and it’s quite complex, I believe there is a bug in Polaris fields where the defaultValue is not reflected when it changes.
You can reproduce it here: https://codesandbox.io/p/devbox/headless-river-forked-7kw66q?file=%2Fsrc%2FApp.tsx%3A20%2C10&workspaceId=ws_2ajUMWBiBa7sDb8MJCFnBo
Try to change the two values for the two fields and click on submit. On the line 17, I use the resetForm to set new default values. While the native input will properly reflect the new value, the polaris field will become… empty. This does not make sense to me, because it has never been empty.
I’ve been fighting for nearly 2 days trying to integrate RVF, at this stage I’m not sure which one can be the culprit between React, Polaris, RVF… so I’m trying to do it by step, and it seems Polaris behavior is odd here.
It appears that codesandbox is private
Sorry, please try again here: https://codesandbox.io/p/devbox/headless-river-forked-7kw66q?workspaceId=ws_2ajUMWBiBa7sDb8MJCFnBo
1 Like
Thanks for the codesandbox!
Looking at the dom after clicking submit, it appears the library you’re using removed the attributes and cleared the properties for value / defaultValue:
So I’m not familiar with those libraries, but it seems like the issue lies there; make sure that the attribute is still there after submit (or set the properties).
You’re right, it seems I misunderstood some RVF feature as well.
@Anthony_Frehner I’m still experiencing some odd behavior. If I use this component:
<s-text-field defaultValue="foo"></s-text-field>
And then check the defaultValue property in JS in the field created in the shadow dom, it returns it as empty string. If I remember the default value is the initial value when inserted into the DOM. It might be possible that you’re actually creating the underyling input with an empty default value and THEN reflect the defaultValue property as the underlying value, which means the default value will become incorrect.
THere is something else I’m really not understanding, sorry. I must miss something very important here. If you check this CodeSandbox: https://codesandbox.io/p/sandbox/shopify-rvf-forked-82jj6d
Why does this code:
<s-text-field label="Example" defaultValue={"foo"}></s-text-field>
Reflects at this. Why the defaultValue attribute becomes value here?
Yeah this is the confusing part - the value attribute is reflected by the defaultValue property. Jake Archibald’s article above has a section dedicated to this.