fix: prevent slider bubble input mount cycles

Author: unadlib

packages/slider/src/slider.tsx

@@ -731,10 +731,7 @@ function SliderThumb(props: ScopedProps<SliderThumbProps>): FictNode {
     const dimension = size()?.[orientation.size()]
     return dimension ? getThumbInBoundsOffset(dimension, percent(), orientation.direction()) : 0
   }
-  const isFormControl = () => {
-    const thumbNode = thumb()
-    return thumbNode ? Boolean(context.form() || thumbNode.closest('form')) : true
-  }
+  const isFormControl = createSignal(false)
   const label = () => getLabel(index(), context.values().length)
   const wrapperStyle = () => ({
     transform: 'var(--radix-slider-thumb-transform)',
@@ -773,28 +770,31 @@ function SliderThumb(props: ScopedProps<SliderThumbProps>): FictNode {
     const thumbNode = thumb()
     if (!thumbNode) return
 
+    isFormControl(Boolean(context.form() || thumbNode.closest('form')))
     context.thumbs.add(thumbNode)
     return () => {
+      isFormControl(false)
       context.thumbs.delete(thumbNode)
     }
   })
 
-  const bubbleInputNode = (isFormControl() ? (
-    <SliderBubbleInput
-      __scopeSlider={props.__scopeSlider}
-      name={() => {
-        const itemName =
-          props.name === undefined
-            ? context.name()
-            : readValue(props.name as MaybeAccessor<string | undefined>)
-
-        if (!itemName) return undefined
-        return context.values().length > 1 ? `${itemName}[]` : itemName
-      }}
-      form={context.form}
-      value={value}
-    />
-  ) : null) as unknown as FictNode
+  const bubbleInputNode = (() =>
+    isFormControl() ? (
+      <SliderBubbleInput
+        __scopeSlider={props.__scopeSlider}
+        name={() => {
+          const itemName =
+            props.name === undefined
+              ? context.name()
+              : readValue(props.name as MaybeAccessor<string | undefined>)
+
+          if (!itemName) return undefined
+          return context.values().length > 1 ? `${itemName}[]` : itemName
+        }}
+        form={context.form}
+        value={value}
+      />
+    ) : null) as unknown as FictNode
 
   return (
     <span style={wrapperStyle()}>
@@ -823,28 +823,28 @@ function SliderBubbleInput(props: ScopedProps<SliderBubbleInputProps>): FictNode
     const input = ref()
     const nextValue = readValue(props.value)
     const prevValue = previousValue()
+    const nextValueString = nextValue === undefined ? '' : String(nextValue)
 
     if (!input) return
 
-    if (!Object.is(prevValue, nextValue)) {
-      const descriptor = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')
-      const setValue = descriptor?.set
+    const descriptor = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')
+    const setValue = descriptor?.set
+    if (input.value !== nextValueString) {
       if (setValue) {
-        setValue.call(input, nextValue === undefined ? '' : String(nextValue))
+        setValue.call(input, nextValueString)
       } else {
-        input.value = nextValue === undefined ? '' : String(nextValue)
+        input.value = nextValueString
       }
+    }
 
+    if (!Object.is(prevValue, nextValue)) {
       input.dispatchEvent(new Event('input', { bubbles: true }))
     }
   })
 
   const inputProps = mergeProps(() => inputRestProps as Record<string, unknown>, {
     __scopeSlider: undefined,
-    defaultValue: prop(() => {
-      const nextValue = readValue(props.value)
-      return nextValue === undefined ? '' : String(nextValue)
-    }),
+    defaultValue: undefined,
     'attr:form': prop(() =>
       formProp === undefined ? undefined : readValue(formProp as MaybeAccessor<string | undefined>),
     ),
@@ -858,7 +858,10 @@ function SliderBubbleInput(props: ScopedProps<SliderBubbleInputProps>): FictNode
       display: 'none',
       ...readStyle(props.style),
     })),
-    value: undefined,
+    value: prop(() => {
+      const nextValue = readValue(props.value)
+      return nextValue === undefined ? '' : String(nextValue)
+    }),
   })
 
   return (

packages/slider/test/index.test.tsx

@@ -58,7 +58,7 @@ describe('@fictjs/slider', () => {
     document.body.innerHTML = ''
   })
 
-  it('updates a single-thumb slider from pointer interactions and mirrors the value to the bubble input', async () => {
+  it('updates a single-thumb slider from pointer interactions without rendering a bubble input outside forms', async () => {
     const container = document.createElement('div')
     document.body.append(container)
     const onValueCommit = vi.fn()
@@ -79,7 +79,6 @@ describe('@fictjs/slider', () => {
 
     const slider = container.querySelector('[data-orientation="horizontal"]') as HTMLSpanElement
     const range = container.querySelector('[data-testid="range"]') as HTMLSpanElement
-    const bubbleInput = container.querySelector('input') as HTMLInputElement
 
     Object.defineProperty(slider, 'getBoundingClientRect', {
       value: () =>
@@ -103,10 +102,36 @@ describe('@fictjs/slider', () => {
 
     expect(range.style.left).toBe('0%')
     expect(range.style.right).toBe('50%')
-    expect(bubbleInput.value).toBe('50')
+    expect(container.querySelector('input')).toBeNull()
     expect(onValueCommit).toHaveBeenCalledWith([50])
   })
 
+  it('renders a bubble input with the current value when the slider participates in a form', async () => {
+    const container = document.createElement('div')
+    document.body.append(container)
+
+    mount(
+      () => (
+        <form>
+          <Root defaultValue={[25]} max={100} name="volume">
+            <Track data-testid="track">
+              <Range data-testid="range" />
+            </Track>
+            <Thumb />
+          </Root>
+        </form>
+      ),
+      container,
+    )
+
+    await waitForEffects()
+
+    const bubbleInput = container.querySelector('input') as HTMLInputElement
+
+    expect(bubbleInput.name).toBe('volume')
+    expect(bubbleInput.value).toBe('25')
+  })
+
   it('steps the focused thumb with keyboard input', async () => {
     const container = document.createElement('div')
     document.body.append(container)