Закрыть baloon placemark по клику на карту а не на крестик самого baloon в react-yandex-map

Вот код кому интересно и есть время помочь https://codesandbox.io/s/l7oqnz7mml


Ответы (2 шт):

Автор решения: frozencoast

Не знаю, как закрыть balloon корректно через API, но нашёл решение, которое работает в вашем случае:

function closeCurrentBalloon() {
  let close = document.querySelector('ymaps[class$="-balloon__close-button"]');
  if (close != null) {
    close.click();
  }
}

function App() {
  return (
    <div className="App">
      <YMaps>
        <Map state={mapState} onClick={closeCurrentBalloon}>
          ...
        </Map>
      </YMaps>
    </div>
  );
}

Для наглядности: https://codesandbox.io/s/react-yandex-maps-issue-101-9s5q1

→ Ссылка
Автор решения: Сергей Савельев

В реакте нужно получить instanceRef компонента YMap и Placemark, после навесить событие при клике на карту для закрытия балуна:

const [map, setMap] = useState();
const [placemark, setPlacemark] = useState();

useEffect(() => {
    if (!map || !placemark) {
        return;
    }

    map.events.add('click', () => placemark.balloon.close());
}, [map, placemark]);

<YMaps query={{load: 'package.full'}}>
    <YMap
        instanceRef={setMap}
        {...yMapProps}
    >
        <Placemark
            instanceRef={setPlacemark}
            {...yMapPlacemarkProps}
        >
    </YMap>
</YMaps>
→ Ссылка