Skip to content

Reactivity regression with 5.19.5 with conditional function calls #15229

@techniq

Description

@techniq

Describe the bug

I had a bug report in LayerChart that took me a while to track down. It appears between 5.19.4 and 5.19.5 there was a change with reactivity for conditional function calls.

When labelAccessor(data) returns undefined, it will fallback to keyAccessor(data) but if data changes the result is not updated (but valueAccessor(data) and others are).

<slot name="tooltip" {...slotProps}> <Tooltip.Root {...props.tooltip?.root} let:data> <Tooltip.List {...props.tooltip?.list}> <Tooltip.Item label={labelAccessor(data) || keyAccessor(data)} value={valueAccessor(data)} color={cScale?.(c(data))} {format} {...props.tooltip?.item} /> </Tooltip.List> </Tooltip.Root> </slot>

One workaround is to pull the values up into separate {@const}

<slot name="tooltip" {...slotProps}> <Tooltip.Root {...props.tooltip?.root} let:data> {@const label = labelAccessor(data)} {@const key = keyAccessor(data)} <Tooltip.List {...props.tooltip?.list}> <Tooltip.Item label={label || key} value={valueAccessor(data)} color={cScale?.(c(data))} {format} {...props.tooltip?.item} /> </Tooltip.List> </Tooltip.Root> </slot>

But even more surprising is pulling up just the key value (but still use the same fallback) triggers the update.

<slot name="tooltip" {...slotProps}> <Tooltip.Root {...props.tooltip?.root} let:data> {@const key = keyAccessor(data)} <Tooltip.List {...props.tooltip?.list}> <Tooltip.Item label={labelAccessor(data) || keyAccessor(data)} value={valueAccessor(data)} color={cScale?.(c(data))} {format} {...props.tooltip?.item} /> </Tooltip.List> </Tooltip.Root> </slot>

The later is the workaround I added to LayerChart in 0.93.8

Reproduction

Running svelte: '^5.9.5' with layerchart: '0.93.7' and moving between PieChart arcs shows the issue (without the Tooltip unmounting).

See this repo created for the LayerChart issue (thanks @anatoliy-t7). See also the video in the original issue for a demonstration.

Logs

System Info

{ 'svelte': '^5.9.5', 'layerchart': '0.93.7' }

Severity

blocking an upgrade

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions