Skip to content

Input copy toggle visibility does not display validation message

Elwyn Benson requested to merge 467326-input-copy-toggle-visibility-does-not-display-validation-message-correctly into master

What does this MR do and why?

Fixes issue where validation messages do not correctly display in input-copy-toggle-visibility component.

This is due to an underlying problem with bootstrap, where the message is made visible via a CSS sibling selector, which assumes the validation message + input will be next to each other in the DOM. This is not the case when using a form-group component.

More info: https://github.com/bootstrap-vue/bootstrap-vue/issues/1251 and https://github.com/twbs/bootstrap/issues/23454

This MR applies a custom class which forces the message to display at the correct time.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
image image

How to set up and validate locally

From the gitlab repo

  • cd storybook
  • yarn
  • yarn start
  • view the new input_copy_toggle_visibility story

Related to #467326 (closed)

Edited by Elwyn Benson

Merge request reports