ionic-team / ionic-team/ionic-framework

bug: ion-input-password-toggle causes UI misalignment with clear-input icon

オープン
#30,023 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
triage
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

Currently, with clear-input it shifts the icon to the left, so the alignment looks weird:

![image](https://github.com/user-attachments/assets/f51680df-de03-4c74-9879-2c27912564c3)

### Expected Behavior

Ideally, we want something like this:

![image](https://github.com/user-attachments/assets/b0c4d4c2-ea3f-414d-8d54-40c1a5d2b2af)

Oddly enough when trying to apply CSS positioning, it makes the icon non-interactable, i.e. can't click on it anymore.

### Steps to Reproduce

```html




```

### Code Reproduction URL

N/A

### Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/home/braincomb/.nvm/versions/node/v22.11.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.3.3

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v22.11.0 (/home/braincomb/.nvm/versions/node/v22.11.0/bin/node)
npm : 10.9.0
OS : Linux 5.15

### Additional Information

_No response_

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start with the provided ion-input reproduction using clear-input, an ion-icon in the start slot, and ion-input-password-toggle in the end slot. Inspect the related input and password-toggle component styling, then verify that the icons remain aligned and the password toggle remains clickable in the reproduced case.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。