Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Calcite switch input name and value attributes overwritten #42

Closed
vcolavin opened this issue Jun 5, 2019 · 1 comment
Closed
Assignees
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug.

Comments

@vcolavin
Copy link
Contributor

vcolavin commented Jun 5, 2019

cc @patrickarlt

I came across this while working on #1. I think this issue is coming from the syncProxyInput method. The method should check whether the this.inputProxy has a name or value before assigning this.name or this.value. It should also check whether this.name or this.value is undefined, to avoid assigning the string "undefined" to the proxy input.

To reproduce:

Pass an input with a name and/or value into calcite-switch's slot:

<label>
  <calcite-switch>
    <input type="checkbox" name='some-name' value='some-value'/>
  </calcite-switch>
  Here's my label
</label>

Expected result

Expect to have calcite-switch's input element to have correct name and value attrs in the outputted DOM, e.g.

<label>
  <calcite-switch>
    <input type="checkbox" name='some-name' value='some-value'/>
  </calcite-switch>
  Here's my label
</label>

Actual result

name and value are overwritten with the string "undefined".

<label>
  <calcite-switch>
    <input type="checkbox" name='undefined' value='undefined'/>
  </calcite-switch>
  Here's my label
</label>

Note that this only happens with name and value. You could pass in some-random-attr='test' and it is maintained.

Workaround

You can put the name and value on calcite-switch directly:

<label>
  <calcite-switch  name='some-name' value='some-value'>
    <input type="checkbox"/>
  </calcite-switch>
  Here's my label
</label>
@vcolavin vcolavin added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jun 5, 2019
@vcolavin vcolavin self-assigned this Jun 5, 2019
@patrickarlt
Copy link
Contributor

@vcolavin like #43 (comment) since hte user is passing in the input I think that:

<label>
  <calcite-switch>
    <input type="checkbox" name='some-name' value='some-value'/>
  </calcite-switch>
  Here's my label
</label>

the values from the inputs should "win" and the result should be

<label>
  <calcite-switch name='some-name' value='some-value'>
    <input type="checkbox" name='some-name' value='some-value'/>
  </calcite-switch>
  Here's my label
</label>

THEN I think is any value switched, checked, name, value changes on either element that should be synced. You can observe attribute changes on the <input> with MutationObservers.

vcolavin added a commit that referenced this issue Jun 7, 2019
@vcolavin vcolavin mentioned this issue Jun 7, 2019
patrickarlt pushed a commit that referenced this issue Jun 8, 2019
* make it so input name and value are properly preserved

* specify that switch props are optional

* address #42 using a mutation observer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug.
Projects
None yet
Development

No branches or pull requests

2 participants