[Input]: Input component does not take id into consideration

[anichkasam]

Describe the bug

Input component does not accept id attribute, and instead sets id="inner" to the wrapped input HTML element. That's why when I have have several Input components in a form, I get the following warning in the browser's console:

[DOM] Found 7 elements with non-unique id #inner: (More info: https://goo.gl/9p2vKq)

Isolated Example

No response

Reproduction steps

...

Expected Behaviour

Input component accepts id and sets that value to the id attribute of the input HTML Element.

Screenshots or Videos

No response

UI5 Web Components for React Version

Input

UI5 Web Components Version

2.15.3

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[MarcusNotheis]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[IlianaB]

Hello @UI5/ui5-team-ctr-ril , I am forwarding this issue to you in order you to evaluate if the id of the inner input can be adjusted, so that it is based on the user provided id + "inner" part.

Regards,
Iliana

[nikoletavnv]

Hello @anichkasam,

The ui5-input web component renders native input in it's Shadow DOM and those native inputs have an ID "ïnner". It is allowed for elements in different Shadow DOM trees to have the same ID. Can you please provide us with an example where we can observe these warnings?

I have created this sample and I do not see such warnings in the browser:
https://ui5.github.io/webcomponents/play/#eNrdVFtr2zAU_iuqn9pSRevDxvDcMtatUOgukIwxyItsndRqZcmz5Lqh5L_vHNlOk15GGHsaCsQ6l-_cPp37RFsFd5MyVCZJ7xMrK0jSTeFRUjgbwAYUZ3ucs9rI5VXjWqv4whnFOD-d22zv49ez2c9vnxg5kYD-mZH26mSegJ0nKBtPVoJUeGf4y3xYGqDLYWpd2E8VLLQFdcDuUaa0p3Aps87COxSsyD_GiPqFawpQvHDGNVyq69aHLVuWiRH_vw-XVRAkK0rZeAjY9O-zc_429n1Q0WxRfquhq10T5gkbJovCTqtQnii41QXweDli2uqgpeG-kAZOjievBrCgA8Y8d03FLmUOhk1radlUVrWBTPRasjPa3rAGDMLHNH0JQFHLBhYom4hKajspvI-4mRhYgZ-5U0sWfdAul8XNwLfYiZTdymafcy_rD2vVGWkOhgSfYSkHOzCVDFr9GqWYP4WEhge4oybEkjodSiy9bkPP2UBn7cF1gGotHhQmdgHV1Eh_YWss0htHkFF11rcZ8X5APkWENBNrv8dgMTSWaFoqHoucFK5CQK0e0E97_2j6kKN4kuRO2W8H_IwzYVMakywK8F7nBjgxh_dT86HBKV7m5oUsngU9fnP89q8R_01dX6ALrsM9xHYNsiUdiPPi_sOXXjS6DiwsawpXOdUaIB40BV2J6dc-VtgbRsYTz3vGi3Ft_pG7yepohNpY1qNkc1OLw02UUitgh2JudUUvn9Hj21D7tiZxTBBXy1PfmMGW_3tsjOggR27WuJBs8AK3WRD0hEacnYwvsNujAx0h2KwEfEzGuE7bK9xRmLv2uEh-tboBxZw1S3psLKCdj1tnh1hxU-2c2QwXws7GF8SkzRrWY8Ld9nhOJNocVLJa_QZacqTL

Best regards,
Nikoleta