add an outer div that is never removed to ROverlay (#164)

* add an outer div that is never removed to `ROverlay` * update the snapshots
mmomtchev · Jun 30, 2023 · d0b6d21 · d0b6d21
1 parent e923376
commit d0b6d21
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### [1.5.3]
 
 -   Add `onFeaturesLoadStart` and `onFeaturesLoadError` events to all vector layers
+-   Fix [#163](https://github.com/mmomtchev/rlayers/issues/163), DOMException when removing an `ROverlay`
 
 ### [1.5.2] 2023-06-11
 

diff --git a/src/ROverlay.tsx b/src/ROverlay.tsx
@@ -89,12 +89,14 @@ export class ROverlayBase<P extends ROverlayProps> extends RlayersBase<P, Record
     render(): JSX.Element {
         this.setPosition();
         return (
-            <div
-                ref={this.containerRef}
-                className={this.props.className}
-                onClick={this.props.onClick}
-            >
-                {this.props.children}
+            <div className='_rlayers_ROverlay'>
+                <div
+                    ref={this.containerRef}
+                    className={this.props.className}
+                    onClick={this.props.onClick}
+                >
+                    {this.props.children}
+                </div>
             </div>
         );
     }

diff --git a/test/__snapshots__/RFeature.test.tsx.snap b/test/__snapshots__/RFeature.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<RFeature> should create features 1`] = `"<div style="width: 100px; height: 100px;"><div class="_rlayers_RLayerVector"><div class="_rlayers_RFeature"><div>marker "\\"\\""</div></div><div class="_rlayers_RFeature"><div>marker "\\"\\""</div></div></div><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div style="pointer-events: auto;" class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">–</button></div><div style="pointer-events: auto;" class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass">⇧</span></button></div><div style="pointer-events: auto;" class="ol-attribution ol-unselectable ol-control ol-collapsed"><button type="button" aria-expanded="false" title="Attributions"><span class="ol-attribution-expand">i</span></button><ul></ul></div></div></div></div>"`;
 
-exports[`<RFeature> should support deleting features with nested elements 1`] = `"<div style="width: 100px; height: 100px;"><div class="_rlayers_RLayerVector"><div class="_rlayers_RFeature"></div></div><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div class="ol-overlay-container ol-selectable" style="position: absolute; pointer-events: auto; display: none;"><div><div>Test</div></div></div><div style="pointer-events: auto;" class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">–</button></div><div style="pointer-events: auto;" class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass">⇧</span></button></div><div style="pointer-events: auto;" class="ol-attribution ol-unselectable ol-control ol-collapsed"><button type="button" aria-expanded="false" title="Attributions"><span class="ol-attribution-expand">i</span></button><ul></ul></div></div></div></div>"`;
+exports[`<RFeature> should support deleting features with nested elements 1`] = `"<div style="width: 100px; height: 100px;"><div class="_rlayers_RLayerVector"><div class="_rlayers_RFeature"><div class="_rlayers_ROverlay"></div></div></div><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div class="ol-overlay-container ol-selectable" style="position: absolute; pointer-events: auto; display: none;"><div><div>Test</div></div></div><div style="pointer-events: auto;" class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">–</button></div><div style="pointer-events: auto;" class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass">⇧</span></button></div><div style="pointer-events: auto;" class="ol-attribution ol-unselectable ol-control ol-collapsed"><button type="button" aria-expanded="false" title="Attributions"><span class="ol-attribution-expand">i</span></button><ul></ul></div></div></div></div>"`;
 
 exports[`<RFeature> should support deleting features with nested elements 2`] = `"<div style="width: 100px; height: 100px;"><div class="_rlayers_RLayerVector"></div><div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div style="position: absolute; width: 100%; height: 100%; z-index: 0;" class="ol-unselectable ol-layers"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer"></div><div style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;" class="ol-overlaycontainer-stopevent"><div style="pointer-events: auto;" class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">–</button></div><div style="pointer-events: auto;" class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass">⇧</span></button></div><div style="pointer-events: auto;" class="ol-attribution ol-unselectable ol-control ol-collapsed"><button type="button" aria-expanded="false" title="Attributions"><span class="ol-attribution-expand">i</span></button><ul></ul></div></div></div></div>"`;