TypeError: element.getInputElement is not a function

Hi, I am trying connect Ionic 4’s IonInput with Typescript/React to use autocompletion using Google Places API. For this to work, I need to pass the native input element that Ionic uses to the api:
new google.maps.places.Autocomplete(el, {types: []});

This question is about how to get the el.

Per https://ionicframework.com/docs/api/input#methods, there is a function getInputElement() that does exactly what I need. However, I don’t seem to be able to invoke it. I get a TypeError: element.getInputElement is not a function error on element.getInputElement() in componentDidMount below.

import {IonItem, IonList, IonInput, IonIcon} from '@ionic/react';
import React, { Ref } from 'react';
import { pin, search } from 'ionicons/icons';

class PlacesSearch extends React.Component {
  protected keywordRef : any;
  protected keywordAutocomplete : any;

  constructor(props:any) {
    this.keywordRef = React.createRef();

  componentDidMount() {
    const element : HTMLIonInputElement = (this.keywordRef.current as HTMLIonInputElement);

    element.getInputElement().then((el) => {
      this.keywordAutocomplete = new google.maps.places.Autocomplete(el, {types: []});
  render() {
    return (<>
                        <IonIcon icon={pin} item-start></IonIcon>
                            placeholder="Place name, category, address, ..."

Inspecting element with Chrome’s debugger shows element: ion-input#placename which appears to be correct. This is likely to be my mistake in using react.


 "dependencies": {
    "@ionic/react": "^4.11.7",
    "@ionic/react-router": "^4.11.7",

Any help is appreciated. Thank you!