vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
462 stars 83 forks source link

[combo-box] Pattern does not work properly when using object items #1370

Open hyyan opened 7 years ago

hyyan commented 7 years ago

Description

Hey , I am trying to implement a list with vaadin-combo-box to allow decimal number selection from a predefined list of numbers or as a custom value. to make sure the user will not enter invalid numbers I use the pattern property to validate the input. The pattern I use is the following [0-9]{1}(0)?(\.\d{0,4})? so number like 0.1 0.01 2 are allowed.

The numbers list is retrieved from an object like the following one:

   { label: '0.1 option', value: 0.1 },
   { label: '0.2 option', value: 0.2 },
   { label: '0.3 option', value: 0.4 },
   { label: '2 option', value: 2 }

Expected outcome

Vaadin combox is able to validate the input (from predefined list or custom value) correctly using the provided pattern

Actual outcome

Custom values are validated correctly, but not values from the predefined list

Live Demo

https://jsfiddle.net/1qeh85o9/3/

Steps to reproduce

1 - select a value - > invalid input 2- enter value like : 0.2 -> valid value

Browsers Affected

platosha commented 7 years ago

Could be because of type mismatch. Pattern expects strings, while you have number values in your array. Could you, please, try with strings?

hyyan commented 7 years ago

@platosha Just did, it does not work too here is a new fiddle : https://jsfiddle.net/1qeh85o9/4/

web-padawan commented 5 years ago

Sorry for the lack of response.

This happens because pattern is propagated to underlying text-field, and then used by native input to check if the value is valid or not.

Problem is that value assigned to native input in this case is combo-box item label (which is "0.1 option"), not the actual value (which is 0.1).

Changing that would require us to re-implement pattern in combo-box instead of propagating it to vaadin-text-field. This could be non-breaking change though.