【React／Leaflet】マップ上のInputの文字列をドラッグで選択できない

react-leafletでマップ上のInputの文字列をドラッグで選択できないのなんとかしたい！

概要

今回の記事では、react-leafletでマップ上のInputの文字列をドラッグで選択できないのなんとかする手順を掲載する。

仕様書

環境

react 18.2.0
react-leaflet 4.2.1
typescript 5.2.2

手順書

react-leafletでマップ上のInputの文字列をドラッグで範囲選択しようとすると選択できず、マップの表示位置がスクロールする。

なんというかマップの方にドラッグのコントロールが奪われてるみたい。

L.Mapのdragging.enableとdragging.disableでマップ上でのドラッグの制御の有効化、無効化が行えるので、Inputの領域にマウスが入った時にマップのドラッグの制御の無効化、領域外に出た時にドラッグの制御の有効化することでInputの文字列をドラッグで範囲選択できるようになる。

Inputのコンポーネントはこんな感じ。

import React from 'react';
import { useMap } from 'react-leaflet';

const MyControl = () => {
    const map = useMap();

    const handleMouseEnter = () => {
        map.dragging.disable();
    };

    const handleMouseLeave = () => {
        map.dragging.enable();
    };

    return (
        <div
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            <Input type="text" />
        </div>
    );
};

前述のコンポーネントは`useMap`を使ってるので`MapContainer`の中に設置する。

```tsx
import React from 'react';
import { MapContainer, TileLayer} from 'react-leaflet';

const MyMap = () => {
  return (
    



  );

こんな感じ。

まとめ（感想文）

一点注意があって、dragging.disableしてるUIの中にそのUIを閉じるボタンがある場合、そのボタンを押してUIを閉じてしまうとonMouseLeaveが発火しないのでボタンを押した時にdragging.enableするようにする。