IonSelect with IonGrid: Displayed Option too short

Ionic Framework Ionic React
1

I’m using IonSelect inside an IonGrid. The displayed options text is shorter that it has to be. It is especially short when a Label is provided.

Here are the images:

ionselect-with-label ionselect-no-label

The code:

import * as React from "react";
import { render } from "react-dom";
// core css for ionic to work properly
import "@ionic/react/css/core.css";
import {
  IonSelect,
  IonItem,
  IonSelectOption,
  IonGrid,
  IonRow,
  IonCol,
  IonLabel
} from "@ionic/react";

function App() {
  const [value, setValue] = React.useState("");
  const options = ["short", "loooooooooong", "veeeeeeeeeery loooooooooong"];
  return (
    <IonGrid>
      <IonRow>
        <IonCol size="6">
          <IonItem>
            <IonLabel>Label</IonLabel>
            <IonSelect
              interface="popover"
              placeholder="Select one"
              value={value}
              onIonChange={e => setValue(e.detail.value)}
            >
              {options.map((option, i) => (
                <IonSelectOption value={option} key={i}>
                  {option}
                </IonSelectOption>
              ))}
            </IonSelect>
          </IonItem>
        </IonCol>
      </IonRow>
    </IonGrid>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Any suggestions?

Thanks

2

This looks correct to me.

The value text and its size getting cut off is to be expected when you have a setup like this.
I’d rethink putting a select/item in a grid element to be honest.

3

I assumed this is the straightforward way of placing two select’s in one row (on desktop)