bug: select, long text does not truncate

[matthew2564]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

Ionic now suggests adding a label or aria-label to tags such as ion-select which is highlighted via this console warning

[Ionic Warning]: ion-select now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute.

Example: <ion-select label="Favorite Color">...</ion-select>
Example with aria-label: <ion-select aria-label="Favorite Color">...</ion-select>

Upon adding an aria-label attribute to the ion-select, the positioning of the up / down carets on the right hand side comes inwards. Here is a basic code example

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-row style="border: 3px solid black;">

      <ion-col class="ion-align-self-center" style="border: 3px solid red;" size="4">
        <label>Fruit</label>
      </ion-col>

      <ion-col>
        <ion-select placeholder="Select a fruit" fill="outline" aria-label="Fruit" style="border: 3px solid blue;">
          <ion-select-option value="apple">Apple</ion-select-option>
          <ion-select-option value="banana">Banana</ion-select-option>
          <ion-select-option value="orange">Orange</ion-select-option>
        </ion-select>
      </ion-col>

    </ion-row>
</ion-content>

The result of that being...

Expected Behavior

I would expect the position of the carets to remain the same as without the aria-label attribute.

In the below example, the carets remain in the position expected.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-row style="border: 3px solid black;">

      <ion-col class="ion-align-self-center" style="border: 3px solid red;" size="4">
        <label id="fruit-label">Fruit</label>
      </ion-col>

      <ion-col>
        <ion-select placeholder="Select a fruit" fill="outline" style="border: 3px solid blue;">
          <ion-select-option value="apple">Apple</ion-select-option>
          <ion-select-option value="banana">Banana</ion-select-option>
          <ion-select-option value="orange">Orange</ion-select-option>
        </ion-select>
      </ion-col>

    </ion-row>
</ion-content>

The result of that being...

Steps to Reproduce

1. Add snippet provided above in the Current Behaviour section

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.8 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework               : not installed
   @angular-devkit/build-angular : 15.2.4
   @angular-devkit/schematics    : 15.2.4
   @angular/cli                  : 15.2.4
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

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

Utility:

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

System:

   NodeJS : v18.10.0 (/Users/matt/.n/bin/node)
   npm    : 8.19.2
   OS     : macOS Unknown

Additional Information

No response

[judsonmusic]

@matthew2564 I was struggling with this today. I had to do a workaround by adding labelPlacement="stacked" hope this helps.

Fixed:

[matthew2564]

Thanks for the workaround @judsonmusic, however there are further issues off the back of this.

<ion-content [fullscreen]="true">
    <ion-row style="border: 3px solid black;">
      <ion-col class="ion-align-self-center" style="border: 3px solid red;" size="4">
        <label id="fruit-label">Fruit</label>
      </ion-col>

      <ion-col size="3">
        <ion-select
          placeholder="Select a fruit"
          aria-label="fruit"
          labelPlacement="stacked"
          multiple="true"
          fill="outline"
          style="border: 3px solid blue;"
        >
          <ion-select-option value="apple">Apple</ion-select-option>
          <ion-select-option value="banana">Banana</ion-select-option>
          <ion-select-option value="orange">Orange</ion-select-option>
        </ion-select>
      </ion-col>
    </ion-row>
</ion-content>

This achieves the desired result mentioned above with the output of

However, if the length of the selected value exceeds that of the ion-select area, there is no longer an ellipsis / ... to truncate the value, this is also a problem when you have multiple selectable options. See below (following code snippet is the same as the one above).

<ion-content [fullscreen]="true">
    <ion-row style="border: 3px solid black;">
      <ion-col class="ion-align-self-center" style="border: 3px solid red;" size="4">
        <label id="fruit-label">Fruit</label>
      </ion-col>

      <ion-col size="3">
        <ion-select
          placeholder="Select a fruit"
          aria-label="fruit"
          labelPlacement="stacked"
          multiple="true"
          fill="outline"
          style="border: 3px solid blue;"
        >
          <ion-select-option value="apple">Apple</ion-select-option>
          <ion-select-option value="banana">Banana</ion-select-option>
          <ion-select-option value="orange">Orange</ion-select-option>
        </ion-select>
      </ion-col>
    </ion-row>
</ion-content>

When selecting all 3 items, this is how it is rendered (where the carets overlay the selected values)

With only the removal of the aria-label attribute or the labelPlacement="stacked", the ellipsis is restored like so

In regards to the ion-select itself, it is frustrating that the aria-labelledby does not suppress the warning. As a result, I'm now having to re-label each ion-select instead of pointing it at the label associated.

[liamdebeasi]

Thanks for the report. Adding aria-label or label opts in to the new form control syntax which has a different architecture under the hood. The big difference is ion-select contains both the label and the form control. So in this case, you should be using the label property on ion-select instead of using a separate <label> and an aria-label.

Here is an example: https://codepen.io/liamdebeasi/pen/yLxmqdR

You can control the order of the label/control using labelPlacement. You can also control how the label and control are packed on a line by using the justify property.

[judsonmusic]

@liamdebeasi can you provide an example using the justify property?

Also, my company uses position stacked for everything so it might be worthwhile making sure the docs are updated for this as well. I created a ticket based on the fact that the stacked label for the ion select is off by a few pixels. Just FYI compared to the ion input.

[liamdebeasi]

Sure, we have some playgrounds that show how the justify property works: https://ionicframework.com/docs/api/select#justification

Also, my company uses position stacked for everything so it might be worthwhile making sure the docs are updated for this as well. I created a ticket based on the fact that the stacked label for the ion select is off by a few pixels. Just FYI compared to the ion input.

This is #27086, correct?

[judsonmusic]

That’s correct. It looks like two bugs that I posted actually are going to be fixed. Can you let me know when they will be released?JudsonOn Apr 3, 2023, at 3:04 PM, Liam DeBeasi ***@***.***> wrote: Sure, we have some playgrounds that show how the justify property works: https://ionicframework.com/docs/api/select#justification Also, my company uses position stacked for everything so it might be worthwhile making sure the docs are updated for this as well. I created a ticket based on the fact that the stacked label for the ion select is off by a few pixels. Just FYI compared to the ion input. This is #27086, correct? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[liamdebeasi]

Those issues have been labeled as bugs, but they have not been fixed yet. However, once the fixes merge we will post on each thread.

[judsonmusic]

@liamdebeasi yes, that is correct. I have two other bugs file that are very similar and it looks like they were indeed marked as bugs. At what point will these be released or how will I know so I can pull latest on ionic? Also, I don't know if you'd be willing to do it but I have been doing ionic since it came out. I'm an architect. I was wondering if it's possible to screen share and show you a couple of things before I actually post potential bugs for them. Let me know if that's a possibility you can email me at [email protected] I am on LinkedIn under Judson Terrell.

[liamdebeasi]

We don't provide public timelines on bug fixes since those timelines sometimes change. However, once a bug fix has been merged into main it is usually (but not always) released in the next patch release. We do patch releases once a week.

I'm fairly active on Discord if you wanted to ask your questions there: https://discord.com/invite/UPYYRhtyzp. Otherwise, feel free to open separate issues here on GitHub.

[judsonmusic]

@liamdebeasi I joined the discord. What is your discord username? I was going to ping you minors under Judson all capital letters. If you want to add me I'll ping you when I'm in front of my desk in a little bit.

[matthew2564]

Thanks for the report. Adding aria-label or label opts in to the new form control syntax which has a different architecture under the hood. The big difference is ion-select contains both the label and the form control. So in this case, you should be using the label property on ion-select instead of using a separate <label> and an aria-label.

Here is an example: https://codepen.io/liamdebeasi/pen/yLxmqdR

You can control the order of the label/control using labelPlacement. You can also control how the label and control are packed on a line by using the justify property.

Does this not invalidate any custom HTML composition?
The reason we are using label in a different context to the select/input itself is due to positioning on a page. i.e. ion-col's spacing elements apart.

If we do not have true flexibility between separating the label to the element then it feels like this shouldn’t be a warning and more of an error.

On another note, why does ‘aria-label’ have any impact on the positioning of the carets themselves? That query is more from inquisitive perspectiveto try and understand the underlying logic/tech more.

Another point mentioned above is re the 'aria-labelledby', why is this not sufficient to suppress the warning produced via the element when using 'ion-select'?

[matthew2564]

What version of Chrome are you using?

Im using Brave, which uses Chromium

Version 1.49.132 Chromium: 111.0.5563.147 (Official Build) (arm64)

[liamdebeasi]

Are you able to reproduce this issue in an Ionic starter app and provide a link to the repo? I'm also using Brave with Chromium 111, and the text is truncated correctly.

[matthew2564]

Are you able to reproduce this issue in an Ionic starter app and provide a link to the repo? I'm also using Brave with Chromium 111, and the text is truncated correctly.

https://github.com/matthew2564/ion-select-testing

I can also see a similar affect when building to the iPad 9th gen iOS simulator, although this repo has a lot more in it which is why I started the above to check if there were other factors

[liamdebeasi]

Thanks! I can reproduce this issue now. The problem is related to stacked labels in ion-select. We incorrectly assume that the selected text can take up 100% of the ion-select width when using stacked labels. However, this is not true because we need to account for the width of the select icon.

[matthew2564]

Thanks! I can reproduce this issue now. The problem is related to stacked labels in ion-select. We incorrectly assume that the selected text can take up 100% of the ion-select width when using stacked labels. However, this is not true because we need to account for the width of the select icon.

Brilliant, and thank you!

If you need any more info/examples etc, then just reach out.

Thanks!

[liamdebeasi]

Here is a dev build if you are interested in trying a proposed fix: 7.0.2-dev.11680713209.14d9bc55

[matthew2564]

Truncation is working fine when specifying aria-label and no labelPlacement

But the caret is not locked to the right hand side (when not using labelPlacement), it appears to be reactive to the length the value in the ion-select

Truncation does not work when specifying both aria-label and labelPlacement="stacked"

Committed and pushed the new version (7.0.2-dev.11680713209.14d9bc55) to https://github.com/matthew2564/ion-select-testing

[liamdebeasi]

Truncation does not work when specifying both aria-label and labelPlacement="stacked"

I'm not able to reproduce this using the dev build and the following code:

<ion-select
  placeholder="Select a fruit"
  aria-label="fruit"
  multiple="true"
  fill="outline"
  style="border: 3px solid blue;"
  labelPlacement="stacked"
  [value]="['apple','banana','orange']"
>
  <ion-select-option value="apple">Apple</ion-select-option>
  <ion-select-option value="banana">Banana</ion-select-option>
  <ion-select-option value="orange">Orange</ion-select-option>
</ion-select>

Just FYI your package-lock.json is still trying to install a nightly build of Ionic which does not have the proposed fix: https://github.com/matthew2564/ion-select-testing/blob/0093096c2bfc44a0f14f517c5f1009ae86d60b8c/package-lock.json#L2981

That could be why you are not seeing any improvements.

[matthew2564]

@liamdebeasi Ah yes nice spot, it now appears to be working my side using 7.0.2-dev.11680713209.14d9bc55, thanks!

[matthew2564]

Hey @liamdebeasi, just confirming if the fix made it into 7.0.2?

Tried to bump my boilerplate project and the fix seems to not be there...? matthew2564/ion-select-testing#1

[liamdebeasi]

The PR for this was merged a few hours after Ionic 7.0.2 went out. You can check the changelog here: https://github.com/ionic-team/ionic-framework/releases/tag/v7.0.2

This fix should be in the next release though. (We release every week)

[ionitron-bot]

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.