Skip to content

fix: unset marker style properties that become undefined (#2595) #2596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MohammadYusif wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix: unset marker style properties that become undefined (#2595) #2596

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b68a941
fix: unset marker style properties that become undefined (#2595)
MohammadYusif Jul 14, 2026
bbdc9ce
Merge branch 'master' into fix/issue-2595
chrisgervang Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion modules/react-mapbox/src/utils/apply-react-style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,43 @@
// https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSPropertyOperations.js#L62
const unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;

// Remembers the style keys applied to each element on the previous call, so that
// properties which are later removed (set to undefined/null or omitted from the
// style object) can be unset instead of lingering on the element.
const appliedStyleKeys = new WeakMap<HTMLElement, string[]>();

export function applyReactStyle(element: HTMLElement, styles: React.CSSProperties) {
if (!element || !styles) {
if (!element) {
return;
}
const style = element.style;
const previousKeys = appliedStyleKeys.get(element);
const nextKeys: string[] = [];

@cursor cursor Bot Jul 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Null style crashes applyReactStyle

High Severity

Removing the !styles guard means for...in runs when styles is null or undefined, which throws. Call sites pass optional props.style, so Markers, Popups, and controls without a style prop crash on mount. An existing test still expects null style not to throw.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit bbdc9ce. Configure here.


for (const key in styles) {
const value = styles[key];
if (value === undefined || value === null) {
continue;

Check failure on line 22 in modules/react-mapbox/src/utils/apply-react-style.ts

View workflow job for this annotation

GitHub Actions / test-node 

Unexpected use of continue statement
}
if (Number.isFinite(value) && !unitlessNumber.test(key)) {
style[key] = `${value}px`;
} else {
style[key] = value;
}
nextKeys.push(key);
}

if (previousKeys) {
for (const key of previousKeys) {
if (!nextKeys.includes(key)) {
style[key] = '';
}
}
}

if (nextKeys.length) {
appliedStyleKeys.set(element, nextKeys);
} else {
appliedStyleKeys.delete(element);
}
}
25 changes: 25 additions & 0 deletions modules/react-mapbox/test/utils/apply-react-style.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,28 @@ test('applyReactStyle', t => {

t.end();
});

test('applyReactStyle#unset removed properties', t => {
/* global document */
if (typeof document === 'undefined') {
t.end();
return;
}

const div = document.createElement('div');

applyReactStyle(div, {background: 'red', color: 'blue'});
t.is(div.style.background, 'red', 'sets background');
t.is(div.style.color, 'blue', 'sets color');

// A property whose value becomes undefined should be unset, others preserved
applyReactStyle(div, {background: undefined, color: 'blue'});
t.is(div.style.background, '', 'unset property that became undefined');
t.is(div.style.color, 'blue', 'kept property that is still set');

// A property omitted from the style object should also be unset
applyReactStyle(div, {});
t.is(div.style.color, '', 'unset property that was removed from styles');

t.end();
});
27 changes: 26 additions & 1 deletion modules/react-maplibre/src/utils/apply-react-style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,43 @@
// https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSPropertyOperations.js#L62
const unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;

// Remembers the style keys applied to each element on the previous call, so that
// properties which are later removed (set to undefined/null or omitted from the
// style object) can be unset instead of lingering on the element.
const appliedStyleKeys = new WeakMap<HTMLElement, string[]>();

export function applyReactStyle(element: HTMLElement, styles: React.CSSProperties) {
if (!element || !styles) {
if (!element) {
return;
}
const style = element.style;
const previousKeys = appliedStyleKeys.get(element);
const nextKeys: string[] = [];

for (const key in styles) {
const value = styles[key];
if (value === undefined || value === null) {
continue;

Check failure on line 22 in modules/react-maplibre/src/utils/apply-react-style.ts

View workflow job for this annotation

GitHub Actions / test-node 

Unexpected use of continue statement
}
if (Number.isFinite(value) && !unitlessNumber.test(key)) {
style[key] = `${value}px`;
} else {
style[key] = value;
}
nextKeys.push(key);
}

if (previousKeys) {
for (const key of previousKeys) {
if (!nextKeys.includes(key)) {
style[key] = '';
}
}
}

if (nextKeys.length) {
appliedStyleKeys.set(element, nextKeys);
} else {
appliedStyleKeys.delete(element);
}
}
25 changes: 25 additions & 0 deletions modules/react-maplibre/test/utils/apply-react-style.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,28 @@ test('applyReactStyle', t => {

t.end();
});

test('applyReactStyle#unset removed properties', t => {
/* global document */
if (typeof document === 'undefined') {
t.end();
return;
}

const div = document.createElement('div');

applyReactStyle(div, {background: 'red', color: 'blue'});
t.is(div.style.background, 'red', 'sets background');
t.is(div.style.color, 'blue', 'sets color');

// A property whose value becomes undefined should be unset, others preserved
applyReactStyle(div, {background: undefined, color: 'blue'});
t.is(div.style.background, '', 'unset property that became undefined');
t.is(div.style.color, 'blue', 'kept property that is still set');

// A property omitted from the style object should also be unset
applyReactStyle(div, {});
t.is(div.style.color, '', 'unset property that was removed from styles');

t.end();
});
Loading