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

Error when using CSS selector for input type and passing a special attribute #2622

Closed
dsego opened this issue Sep 2, 2020 · 2 comments · Fixed by #2983
Closed

Error when using CSS selector for input type and passing a special attribute #2622

dsego opened this issue Sep 2, 2020 · 2 comments · Fixed by #2983
Assignees
Labels
Type: Bug For bugs and any other unexpected breakage

Comments

@dsego
Copy link

dsego commented Sep 2, 2020

Description

Creating a vnode with a CSS selector for input[type=date] and assigning special IDL attribute valueAsNumber fails with an error message.

Could be related to attribute precedence:
https://mithril.js.org/hyperscript.html#attributes-passed-as-the-second-argument

Mithril version: 2.0.4

Browser and OS: Firefox 80.0 / Ubuntu 20.04

Code

Fiddle: https://jsfiddle.net/mhz74q8v/

const timestamp = (str) =>  new Date(str).getTime();
let limits = ['2020-01-01', '2020-12-31'].map(timestamp)
let range = limits

const WorkingExample = {
   view() {
      return m('input', {
        type: 'date',
        valueAsNumber: range[0]
    });
  }
}

/* Throws Error: InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable" */
const ThisBreaks = {
  view() {
      return m('input[type=date]', {
        valueAsNumber: range[0]
      });
   }
}

m.mount(document.body, ThisBreaks)

Expected Behavior

Defining a data[type=input] and setting the special attribute valueAsNumber should work.

Current Behavior

An error is thrown: InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

@dsego dsego added the Type: Bug For bugs and any other unexpected breakage label Sep 2, 2020
@dead-claudia
Copy link
Member

Checked the generated hyperscript vnode, and it's an issue with property application order - the type appears after valueAsNumber.

The fix would be special-casing input.type to be applied before other properties, similar to how select.selectedValue is special-cased to apply after children are rendered.

@dead-claudia
Copy link
Member

Fixed by #2578.

@dead-claudia dead-claudia moved this to Closed in Triage/bugs Sep 2, 2024
kfule added a commit to kfule/mithril.js that referenced this issue Oct 21, 2024
… render.js with another workaround in hyperscript.js

The input[type] inspection at the beginning of setAttr() was called for each attribute. This had a negative impact on performance. The new workaround in execSelector() controls the order of setting attributes by reordering the keys in attrs.
kfule added a commit to kfule/mithril.js that referenced this issue Oct 26, 2024
… render.js with another workaround in hyperscript.js

The input[type] inspection at the beginning of setAttr() was called for each attribute. This had a negative impact on performance. The new workaround in execSelector() controls the order of setting attributes by reordering the keys in attrs.
dead-claudia pushed a commit that referenced this issue Oct 31, 2024
…s with another workaround in hyperscript.js

The input[type] inspection at the beginning of setAttr() was called for each attribute. This had a negative impact on performance. The new workaround in execSelector() controls the order of setting attributes by reordering the keys in attrs.
dead-claudia pushed a commit that referenced this issue Oct 31, 2024
…s with another workaround in hyperscript.js

The input[type] inspection at the beginning of setAttr() was called for each attribute. This had a negative impact on performance. The new workaround in execSelector() controls the order of setting attributes by reordering the keys in attrs.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug For bugs and any other unexpected breakage
Projects
Status: Closed
2 participants