bug: `IonRange` does not render dual knobs correctly when value is set initially

[sean-perkins]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When IonRange initially renders with an initial value and dual knobs, the dual knobs will not display with their correct value position. This happens when either setting the value inline, against a variable reference or using useState.

If you cause a re-render of the component, the knobs will render correctly.

Expected Behavior

The dual knobs should render with the values assigned.

Steps to Reproduce

1. Open reproduction URL
2. Observe: Dual knobs are not displayed (both knobs are 0 position)
3. Click "Cause Re-Render"
4. Observe: The two range elements not bound to a state variable are rendered correctly

Code Reproduction URL

https://stackblitz.com/edit/angular-t1fufz?file=src%2Fmain.tsx

Ionic Info

N/A

Additional Information

No response

[mepc36]

Hi, loving the package so far.

Any update on this issue? Has anyone found a workaround?

I tried a hacky solution of manually emitting an event (in @ionic/react 6) using a ref, but no luck.

Thanks!

[mepc36]

Since there's a special place in hell for devs who ask a question and then never post their answer (haha), here's mine:

Basically, add a button that you programmatically click post-render, and hide said button:

import React from 'react'
import { IonApp, IonContent, IonModal, IonRange, IonButton } from '@ionic/react'

export function MyComponent() {
  const [range, setRange] = useState({})
  const resetButtonRef = useRef()

  return (
    <IonApp>
      <IonContent>
        <IonModal
          onDidPresent={() => {
            resetButtonRef.current.click()
          }}
        >
          <IonRange
            pin
            ticks
            dualKnobs
            min={...}
            max={...}
            value={range}
            onIonChange={event => {
              setRange(event.detail.value)
            }}
          />
          <IonButton
            ref={resetButtonRef}
            style={{ display: 'none' }}
            onClick={() => {
              setRange(range)
            }}
          />
        </IonModal>
      </IonContent>
    </IonApp>
  )
}