search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.32k stars 285 forks source link

<Textfield/> does not handle input$readOnly attribute correctly. #657

Open thubalek opened 6 months ago

thubalek commented 6 months ago

Describe the bug <Textfield/> does not handle input$readOnly attribute correctly. Tested with SMUI version 7.0.0

To Reproduce Steps to reproduce the behavior:

  1. Use <TextField ... input$readOnly="{true}"/>
  2. Use <TextField ... input$readOnly="{false}"/>

Idea for this code comes from https://github.com/hperrin/svelte-material-ui/issues/280#issuecomment-917448818

Expected behavior In first case there should be HTML code in style <input ... readonly/>

In second case there should be attribute readonly omitted but it is rendered as 

<input type="text" readonly="false"/>

that is wrong as readonly="false" is is interpreted by browser as readonly="true".

See https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attribute and https://html.spec.whatwg.org/multipage/input.html#attr-input-readonly for explanation.

Additional comments The problem is that following code does not work.

<script>
  import Textfield from "@smui/textfield";
  let ro : boolean = false;
</script>

<TextField ... input$readonly="{ro}"/>