Skip to content

RadioGroup scrolling page #1298

Description

@vlaux

Describe the bug
On the RadioGroup component, when labels change regarding selected value (exemple above), the whole page scrolls up when changing option.

image

To Reproduce

On Styleguide's page, change the second example (One option disabled) with the following code:

initialState = { value: 'large' }
;<RadioGroup
  hideBorder
  name="sizes"
  options={[
    {
      value: 'large',
      label: (
        <div>
          <div className="b">Large</div>
          {state.value === 'large' && <div className="c-muted-1 f6">50x50x60</div>}
        </div>
      ),
    },
    {
      value: 'medium',
      label: (
        <div>
          <div className="b">Medium</div>
          {state.value === 'medium' && <div className="c-muted-1 f6">40x40x40</div>}
        </div>
      ),
      disabled: false,
    },
    {
      value: 'small',
      label: (
        <div>
          <div className="b">Small</div>
          {state.value === 'small' && <div className="c-muted-1 f6">20x20x30</div>}
        </div>
      ),
    },
  ]}
  value={state.value}
  onChange={e => setState({ value: e.currentTarget.value })}
/>

Then change between first and last option. On every change, page will scroll.

Expected behavior
No page scroll when changing options.

Screenshots
example

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions