[Bug] Prop `style` does not unset properties that become `undefined`
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 8.5k
- Forks
- 1.4k
- Avg merge
- 5d 17h
- Merged PRs (30d)
- 3
Description
Description
In the following snippet:
<MapGLMarker
latitude={location.coordinates.latitude}
longitude={location.coordinates.longitude}
anchor="bottom"
style={{
...(condition
? { background: 'red', }
: { background: undefined, }), // Note: similar problem if just passing {}
}}
>
Expected Behavior
When condition goes from true to false, the background attribute is un-set on the element.
Steps to Reproduce
Reproduction: https://codesandbox.io/p/sandbox/long-rgb-6f4mdv
Code snippet
import * as React from "react";
import { createRoot } from "react-dom/client";
import Map, { Marker } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
function Root() {
const [state, setState] = React.useState(false);
return (
<>
<button onClick={() => setState(!state)}>
background: {state ? "on" : "off"}
</button>
<Map
initialViewState={{
latitude: 37.8,
longitude: -122.4,
zoom: 14,
}}
style={{ width: "100vw", height: "100vh" }}
mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
>
<Marker
longitude={-122.4}
latitude={37.8}
style={{
...(state ? { background: "red" } : { background: undefined }), // Note: similar problem if just passing {}
}}
/>
</Map>
</>
);
}
/* global document */
createRoot(document.getElementById("app")).render(<Root />);
Environment
- Framework version: react-map-gl@8.1.1 (in my project; reproduction template used
^7.1.0) - Map library: mapbox-gl@3.24.0
- Browser: (not relevant)
- OS: (not relevant)
Logs
No logging produced
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Marker component entry point and trace how its style prop is applied during updates. Run the linked CodeSandbox reproduction, then inspect the style-update path for transitions from a defined background to undefined or an empty object. Done means the background attribute is removed when the condition changes to false.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 66/100