iOS Select Overlapping Label - Bug?

Select pickers & dropdowns
1

Hi,

I am experiencing a bug when using the react library with the iOS theme, Select and labelStyle of floating. Please see the code below and two screenshots. On first render when a default item is specified, the label overlaps the item. If I select the item again or change the item then it renders correctly.

Any workarounds or am I doing something incorrectly? Tested on Firefox and Chrome using V4.7.2. Thanks!

import React, {useState} from 'react';

import mobiscroll from "@mobiscroll/react";
import "@mobiscroll/react/dist/css/mobiscroll.min.css";

mobiscroll.settings = {
    theme: 'ios',
};


const locationList = [
    {
        value: 1,
        text: 'Rosebank, Johannesburg',
    },
    {
        value: 2,
        text: 'Sandton, Johannesburg',
    }
];

const Bug = () => {

    const [selectedLocation, setSelectedLocation] = useState(null);

    return (
        <mobiscroll.Form labelStyle="floating">
            <mobiscroll.FormGroup>
                <label>
                    Location
                    <mobiscroll.Select
                        data={locationList}
                        value={selectedLocation}
                        onSet={(event, inst) => setSelectedLocation(inst.getVal())}
                    />
                </label>
            </mobiscroll.FormGroup>
        </mobiscroll.Form>
    )
};

export default Bug;

bug(iPhone%205_SE)_before_selection
bug(iPhone%205_SE)_before_selection640×1136 6.37 KB

2

Hi @Imtiaz

Yes, I can confirm this is a bug in the 4.7.2 version. Until the fix comes out the following css inserted into the app, should fix it:

.mbsc-ios .mbsc-label-floating.mbsc-input .mbsc-label ~ input {
  height: 3.75em;
  padding-top: 1.5em;
}
1 Like
3

Hi @Imtiaz :wave:

I just wanted to let you know that we’ve just released a new version of Mobiscroll 4.7.3.
In this release we fixed the issue with the select floating label, so if you update to the latest version, you won’t need the workaround I sent you earlier.
Let me know how it goes :wink: