Skip to content

Remove unneeded props from `InputCopyToggleVisibility`

We are trying to fix two problems with the InputCopyToggleVisibility component:

  1. If the props labelFor and formInputGroupProps[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.

  2. 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.

Edited by Eduardo Sanz García

Merge request reports