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

[hyyan]

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

• [x] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] IE 11
• [ ] iOS Safari
• [ ] Android Chrome

[platosha]

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

[hyyan]

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

[web-padawan]

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.