Long words don't get clipped inside the select container

Open Pupix opened this issue 2 years ago • 1 comments

What is affected?

Component

Description

A picture worth a thousand words

Whenever a long word is selected, the label inside the select doesn't get clipped so the text extends outside the container.

The expected behavior would be to have the label get clipped (with ellipsis probably?) based on the available space inside the select, prioritizing leading or trailing icons, just like it happens with text fields.

Reproduction

Lit repro

Workaround

I have not found a workaround

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

14.0.0

Browser/OS/Node environment

Browser: Version 120.0.6099.225 (Official Build) (64-bit) OS: Windows 11 Pro 22621.3007 Node version: v20.11.0 npm version: 9.6.7

Jan 20 '24 14:01 Pupix

It seems like this is an issue in field which was never an issue with textfield because of the native behavior of <input>

Jan 23 '24 00:01 e111077