Remove unneeded props from `InputCopyToggleVisibility`
We are trying to fix two problems with the InputCopyToggleVisibility
component:
-
If the props
labelFor
andformInputGroupProps[id]
were set to match each other, in this way,<input-copy-toggle-visibility label-for="myid" :form-input-group-props="{id:'myid'}" />
,InputCopyToggleVisibility
rendered two elements with the same id,id="myid"
(see related issue). On browsers that allow to focus on readonly input elements (like Firefox), the duplicity of elements with the same id prevented to focus on the input element when clicking in the label. -
It was difficult to add a QA-related classes and selectors specifically to the input element.
To fix these two issues, we have decided to use the nameless slot in
GlFormInputGroup
to replace the default input field by a 'custom'
input element. In this way, we control better what attributes are
applied to the inner input element.
These changes simplify the search of the input element. Hence, a couple of rails spec have been simplified.
After this change (in Firefox):
Screen_Recording_2022-05-20_at_17.43.17
In Safari and Chrome it works only after a few characters have been selected.