Skip to content

[Bug]: Focusable child elements in AdvancedMarkerElement #704

Open
@mxdvl

Description

@mxdvl

Description

When displaying an <input type="number"> inside an <AdvancedMarker />, every click triggers the following console message:

Focusable child elements in AdvancedMarkerElement are not supported. To make AdvancedMarkerElement focusable, use addListener() to register a "click" event on the AdvancedMarkerElement instance.

Steps to Reproduce

import React from 'react';
import { AdvancedMarker } from '@vis.gl/react-google-maps';

function Component() {
  const [value, setValue] = React.useState(String(500));

  return (
    <AdvancedMarker position={{ lat: 51, lng: 0 }}>
      <input
        type="number"
        value={value}
        onChange={({ target }) => setValue(target.value)}
      />
    </AdvancedMarker>
  );
}

See CodeSandBox, but somehow the Advanced Markers are not displaying

Environment

  • Library version: 1.5.1 & 1.1.0
  • Google maps version: weekly
  • Browser and Version: Chrome 134
  • OS: macOS

Logs


Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions