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.

Sign up for GitHub

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

Jump to bottom

Splitter - Set-Size example buggy / crashes #2261

Closed
1 of 3 tasks
sparecycles opened this issue Jun 25, 2024 · 5 comments
Closed
1 of 3 tasks

Splitter - Set-Size example buggy / crashes #2261

sparecycles opened this issue Jun 25, 2024 · 5 comments
Labels
bug Something isn't working

Comments

@sparecycles
Copy link

Description

When I do api().setSize("a", 10) I expect the panel to get resized to 10% of the size.

It doesn't do that consistently, just hitting the buttons makes the UI unresponsive.

Additionally: resizing a panel to under 10% and then setting the size to 10% throws an exception that the total is over 100%:
this breaks mouseover of the handle since state.context becomes undefined.

Link to Reproduction (or Detailed Explanation)

(video)

Steps to Reproduce

set-size.mp4

(Code from https://ark-ui.com/react/docs/components/splitter)

import { Splitter } from '@ark-ui/solid'

export const RenderProp = () => (
  <Splitter.Root
    size={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
  >
    <Splitter.Context>
      {(api) => (
        <>
          <Splitter.Panel id="a">
            <button type="button" onClick={() => api().setSize('a', 10)}>
              Set to 10%
            </button>
          </Splitter.Panel>
          <Splitter.ResizeTrigger id="a:b" />
          <Splitter.Panel id="b">
            <button type="button" onClick={() => api().setSize('b', 10)}>
              Set to 10%
            </button>
          </Splitter.Panel>
        </>
      )}
    </Splitter.Context>
  </Splitter.Root>
)

Ark UI Version

3.3.0

Framework

  • React
  • Solid
  • Vue

Browser

Electron 29.1.5

Additional Information

No response
@segunadebayo segunadebayo changed the title Slider - Set-Size example buggy / crashes Splitter - Set-Size example buggy / crashes Jun 25, 2024
@carwack carwack added the bug Something isn't working label Jul 20, 2024
This was referenced Oct 9, 2024
Closed
Closed
@xeinebiu
Copy link

This issue does mention ArkUI 3.3.0, its really old version per my opinion.

@sparecycles
Copy link
Author

Oh? I may try to reproduce it this weekend with current v4.2.0.

@Jdyn
Copy link

Jdyn commented Nov 14, 2024

Hey @segunadebayo any update on this? We're still encountering this, which is further described in chakra-ui/ark#2967.

Still occurs on the latest version.

@segunadebayo segunadebayo transferred this issue from chakra-ui/ark Feb 23, 2025
@segunadebayo segunadebayo mentioned this issue Feb 24, 2025
Closed
@TyreeceSimpson
Copy link

Has any progress been made on this bug?

@segunadebayo
Copy link
Member

This has been fixed in Zag.js and will reflect in Ark shortly.

When it's done, you can use api.setSizes

<div {...api().getRootProps()}>
  <div {...api().getPanelProps({ id: "a" })}>
    <button
      type='button'
      onClick={() =>
        api().setSizes([
          { id: "a", size: 10 },
          { id: "b", size: 90 },
        ])
      }
    >
      Set to 10%
    </button>
    <p>A</p>
  </div>
  <div {...api().getResizeTriggerProps({ id: "a:b" })} />
  <div {...api().getPanelProps({ id: "b" })}>
    <button
      type='button'
      onClick={() =>
        api().setSizes([
          { id: "a", size: 90 },
          { id: "b", size: 10 },
        ])
      }
    >
      Set to 10%
    </button>
    <p>B</p>
  </div>
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@sparecycles @segunadebayo @carwack @Jdyn @TyreeceSimpson @xeinebiu