bug: Item shows highlight when input with button is focused

fschuetz04 commented 7 months ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I agree to follow the Code of Conduct.
[X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

If:

An item has lines="full"
The item contains an input with a button in its start or end slot
The input or its button is focused with the keyboard

The item shows a black highlight line.

Expected Behavior

The item should not show a highlight line, as far as I am aware this is deprecated in favor of the input showing a highlight line.

Steps to Reproduce

Start an Ionic project and use the following code in the template:

<ion-item color="light" lines="full">
  <ion-input label="Test 2">
    <ion-button slot="end">Test 3</ion-button>
  </ion-input>
</ion-item>

Code Reproduction URL

https://github.com/fschuetz04/ionic-input-button-highlight

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

       Require stack:
       - /opt/homebrew/lib/node_modules/@ionic/cli/lib/project/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/lib/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

       Require stack:
       - /opt/homebrew/lib/node_modules/@ionic/cli/lib/project/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/lib/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/index.js
       - /opt/homebrew/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI                     : 7.2.0 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.7.0
   @angular-devkit/build-angular : 17.1.2
   @angular-devkit/schematics    : 17.1.2
   @angular/cli                  : 17.1.2
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : not installed
   @capacitor/core    : 5.6.0
   @capacitor/ios     : not installed

Utility:

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

System:

   NodeJS : v20.11.0 (/opt/homebrew/Cellar/node@20/20.11.0/bin/node)
   npm    : 10.2.4
   OS     : macOS Unknown

sean-perkins commented 7 months ago

Hello @fschuetz04 thanks for reporting this issue!

I can validate this is a bug and is currently tracked on this existing issue: https://github.com/ionic-team/ionic-framework/issues/26955. I will link over and include your reproduction and notes on that issue.

A workaround for your specific sample would be to apply lines="full" on the ion-list element.

Thank you!

ionitron-bot[bot] commented 6 months ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

ionic-team / ionic-framework