search

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
163 stars 42 forks source link

cds control text overlaps with actions if initial display is hidden #182

Closed ambar-arkin closed 1 year ago

ambar-arkin commented 1 year ago

Describe the bug

If initial display property of container is hidden and later changed to something else. The cds control actions overlap with input text.

image

How to reproduce

https://stackblitz.com/edit/vitejs-vite-qng22i?file=src/App.jsx

Steps to reproduce the behavior:

  1. Uncheck hidden checkbox
  2. Type something long in text and search input
  3. See the text overlap with prefix and suffix actions

Expected behavior

The input text should start after the prefix action and end before it.

Versions

Clarity project:

Clarity version:

Framework:

Framework version: React 18

Device:

Additional notes

This happens due to getBoundingClientRect giving unexpected result when display is none. https://github.com/vmware-clarity/core/blob/17b5842aa44eaf106fea6d9eb7eaf9edd591ac8b/projects/core/src/forms/control/control.element.ts#L353

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 6.2.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 1 year ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.