react-resizable-panels icon indicating copy to clipboard operation
react-resizable-panels copied to clipboard

PanelResizeHandle doesn't trigger cursor change on hover after changing disabled state

Open Sam-Apostel opened this issue 1 year ago • 5 comments

Right after changing the disabled prop of a PanelResizeHandle from true to false, the data-resize-handle-state doesn't update on hover.

Reproduce

  1. render <PanelResizeHandle disabled={true} />
  2. change disabled to false
  3. hover over the PanelResizeHandle.

Expected

the cursor changes to a resize and the data-resize-handle-state attribute changes from inactive to hover

Actual

The cursor doesn't change and the data-resize-handle-state attribute is still inactive

NOTE: Clicking anywhere on the page fixes this. Resizing itself is not broken, just the hover state.

I am willing to look into this and PR if welcome

Sam-Apostel avatar Jul 25 '24 10:07 Sam-Apostel

Hey @Sam-Apostel! Pull requests for things like this are always welcome. As are some kind of runnable repro case (Code Sandbox, or a GitHub project that I can checkout and run)

bvaughn avatar Jul 25 '24 12:07 bvaughn

Running in this also, when first loading your example page, you may reproduce like this:

  1. visit page first time
  2. go back to "Home"
  3. select another example page (eg "nested groups")
  4. hover over resize handles
  5. no "resizable" action being indicated by cursor (= style not injected in head)
  6. click somewhere on the page, hover resize handle = working as expected

Since this is my first time working with your great library, I'll see if I can look into this later! 😉

CHE1RON avatar Oct 01 '24 09:10 CHE1RON

Right after changing the disabled prop of a PanelResizeHandle from true to false, the data-resize-handle-state doesn't update on hover.在将一个 PanelResizeHandledisabled 属性从 true 改为 false 后,鼠标悬停时 data-resize-handle-state 不会更新。

Reproduce  复制

  1. render <PanelResizeHandle disabled={true} />  渲染 <PanelResizeHandle disabled={true} />
  2. change disabled to false  更改 disabledfalse
  3. hover over the PanelResizeHandle.

Expected  预期

the cursor changes to a resize and the data-resize-handle-state attribute changes from inactive to hover光标变为调整大小, data-resize-handle-state 属性从 inactive 变为 hover

Actual  实际

The cursor doesn't change and the data-resize-handle-state attribute is still inactive光标没有变化, data-resize-handle-state 属性仍然是 inactive

NOTE: Clicking anywhere on the page fixes this. Resizing itself is not broken, just the hover state.注意:点击页面上的任何位置即可修复此问题。自身调整大小没有问题,只是悬停状态有问题。

I am willing to look into this and PR if welcome我愿意调查这个问题,如果欢迎的话,我会提交 PR

I also encountered this problem today, did you find a solution?

Explorerlowi avatar Jan 02 '25 10:01 Explorerlowi

I'm encountering the same issue in my project. Is there any update on a solution?

sertack-evenup avatar Apr 03 '25 15:04 sertack-evenup

Any update on this yet?

ujjwal-iqlect avatar Sep 12 '25 07:09 ujjwal-iqlect