[AutoComplete] Input field hidden by autocomplete in mobile safari

[petermikitsh]

Problem description

The user experience of the AutoComplete component on mobile devices could be improved. When you begin typing, the autocomplete options appear on top of the textfield.

The GIF below is from the simulator but it acts identically on a real device.

Link to minimally-working code that reproduces the issue

Nothing really special here. Just a regular AutoComplete component.

<AutoComplete
  ref={(c) => {
    this.autoComplete = c;
  }}
  floatingLabelText="Add New Administrator"
  fullWidth={true}
  filter={AutoComplete.noFilter}
  openOnFocus={true}
  dataSource={query}
  onUpdateInput={handleUpdateInput}
  floatingLabelFixed={true}
  onNewRequest={() => {
    autoComplete.focus();
  }}
/>

Versions

• Material-UI: 0.16.1
• React: 15.3.2
• Browser: Mobile Safari / iOS Simulator

[petermikitsh]

It looks like it has something to do with how positioning is calculated. Hopefully this would narrow down where the buggy code is.

Edit: it seems to be positioned just right when the page scroll offset is 0. Then the farther up or down you scroll, the more off it gets.

[jamespizzurro]

FWIW, I'm also observing this behavior in iOS Safari with material-ui v0.16.4 under React v15.4.1. Does anyone have a workaround in the meantime?

[petermikitsh]

@jamespizzurro No fix, and this is just a hunch, but I think the bug is in the Popover implementation (used by AutoComplete). Lots of calculations in there for computing position.

[markusbergh]

Still experience this with material-ui v0.17.1 and React v15.4.2.

[goldensunliu]

@oliviertassinari any idea if we have a work around for this for now?

[goldensunliu]

this is also happening on mobile chrome and FF

import AutoComplete from 'material-ui/AutoComplete'
import Dialog from 'material-ui/Dialog'
class Example extends Component {
  state = {
    dataSource: [],
  };

  handleUpdateInput = (value) => {
    this.setState({
      dataSource: [
        value,
        value + value,
        value + value + value,
      ],
    });
  };

  render() {
    return (
      <Dialog open={true}>
        <AutoComplete
          hintText="Type anything"
          dataSource={this.state.dataSource}
          onUpdateInput={this.handleUpdateInput}
        />
      </Dialog>
    );
  }
}

the popover for the typeahead doesn't anchor correctly. surprisingly it works fine on mobile width, it just happens when the actually user-agent is a mobile one. I suspect it has do with some mobile specific buggy calculations

[EmirGluhbegovic]

Are there any updates on this issue? I am having the same issue on Safari, mobile safari and mobile chrome. Autocomplete only seems to be working on desktop chrome

[oliviertassinari]

Closed by #4783

[quorak]

after some digging through the code and releases. Here are my findings

• latest working release was 0.18.5 for ios < 10.3
• This PR broke the support for IOS < iOS 10.3 https://github.com/mui-org/material-ui/pull/7333/files
  • by reverting most of the efforts from https://github.com/mui-org/material-ui/pull/4638/files
  • But hast still strange (above) behavior for IOS > 11 (tested with 11.2)

Lots more effort necessary to make it actually work. lets see.

[giordifungula]

Is there a solution as I am encouteting the same issue but on mobile for any device with the autocomplete view.
Its appearing over the textfield ? do we need to use a different component or is it the popover?

[oliviertassinari]

@giordifungula do you have a reproduction with the lastest version of the library?