search

43081j / eslint-plugin-lit

lit-html support for ESLint
116 stars 21 forks source link

Add rule to ensure value is bound after min/max #109

Closed claviska closed 1 year ago

claviska commented 3 years ago

When binding value on an input before min and max, the value is clamped to the default min and max values, resulting in what appears to be buggy behavior. Note how value binds before min|max:

Playground

The last slider is rendered incorrectly, and the internal input has an initial value of 0. Now let's move the value binding after min|max:

Playground

Now the control renders as expected. Since this isn't obvious, and value is often one of the first things users bind to an input, it's probably worth adding a rule to call out when value binds before min or max.

stramel commented 3 years ago

This feels more like a bug/quirk with the browsers. When I get on tomorrow, I will do some digging and see if this should be fixed upstream. Might also be a good thing for lit-plugin instead.

UPDATE: After further discussion, it definitely deserves some kind of warning either here or lit-plugin but that's up to @43081j

43081j commented 3 years ago

i wouldn't call it a bug (with browsers or with lit) but agree we should warn people about it.

logically, its the same as:

const node = document.querySelector('input');

node.value = '40';

node.max = '30'; // this won't change the existing value, it'll just set the new maximum

we could have a rule to just check the order is right and value comes after everything else.