Mithril.js: Error when using CSS selector for input type and passing a special attribute

Created on 2 Sep 2020  路  2Comments  路  Source: MithrilJS/mithril.js

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

Bug

All 2 comments

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.

Fixed by #2578.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pygy picture pygy  路  4Comments

dhinesh03 picture dhinesh03  路  4Comments

omenking picture omenking  路  3Comments

hadihammurabi picture hadihammurabi  路  4Comments

mikejav picture mikejav  路  3Comments