TextField type='date' does not display correctly on mobile

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

create react app

What browsers are you seeing the problem on?

Chrome, Microsoft Edge

Please describe your bug.

TextField does not display correctly on android chrome when type is date the field becomes visually split into 3 rows start, text, end

What’s the expected behaviour?

The field should display similarly to how it appears on a desktop ie on a single row

Help us reproduce the bug!

Bug can be seen in this minimal app https://main.d3nu6n3lsn8380.amplifyapp.com/

source at https://github.com/MigeBill/date-issue

Code Snippet

// Put your code below this line.
export function App() {

  return (

      <View>
        <Text variation='primary'>amplify textfield date</Text>
        <TextField type='date' label=''></TextField>

        <Text>html input date</Text>
        <input type='date'></input>              

      </View>

  );

}```


### Additional information and screenshots

_No response_

[MigeBill]

@hbuchel thanks, that work around is a great improvement 😃

@Anyone, minor typo in above workaround, closing ] is missing

input[type="date"] {
  display: inline-flex
}

[hbuchel]

@MigeBill Just an initial update, there is some difference with the display value for the native browser date picker between desktop and mobile. A sort of workaround (at least specific to Chrome) while we work on a fix is re-setting the display in some additional CSS like below:

input[type="date"] {
  display: inline-flex
}

Stackblitz example

It does not show the typical dropdown arrow like the native unstyled date picker does; or on desktop how it shows the native browser’s calendar icon. On our side, we need to make some decisions about how we treat the missing appearance.