adobe / adobe/spectrum-web-components

[Bug]: sp-textfield multiline with 1 row has a scrollbar in Asian languages

Open
#5,251 3 comments 0 reactions 0 assignees View on GitHub
bug Component:Textfield i18n SEV missing
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-textfield

### Expected behavior

`` doesn't scroll

### Actual behavior

It scrolls.

It looks like the line-height (defined as `normal`) of the text ends up being 20px rather than 17px for Roman languages (quite possible other languages have some issues too). Because the line height is overridden for multiline text areas in the host css, I'm not seeing a way to override this easily.

### Screenshots

Image

### What browsers are you seeing the problem in?

_No response_

### How can we reproduce this issue?

1. Go to ['Textarea Doc page'](https://opensource.adobe.com/spectrum-web-components/components/textarea/)
2. In the debugger, edit a textarea to set `rows="1" placeholder="편집 내용에 제목 지정..."

I've only tested this on Mac/Chrome, and I could see the behavior here changing depending on the OS/browser.

### Sample code or abstract reproduction which illustrates the problem

``

### Severity

None

### Logs taken while reproducing problem

_No response_

Contributor guide

Open the contributing guide

Research direction

Start at the sp-textfield multiline implementation and the Textarea Doc page reproduction, then inspect the host CSS line-height behavior for rows="1" with the Korean placeholder. Confirm the fix by checking that the field no longer shows a scrollbar and compare behavior across the browser or operating-system combinations mentioned.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.