Skip to content
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.

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

RadioGroup scrolling page #1298

Open
vlaux opened this issue Aug 4, 2020 · 0 comments
Open

RadioGroup scrolling page #1298

vlaux opened this issue Aug 4, 2020 · 0 comments

Comments

@vlaux
Copy link
Member

vlaux commented Aug 4, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant