Skip to content

bind:clientWidth doesn't update for resizable element #6127

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

Closed
colah opened this issue Mar 25, 2021 · 9 comments
Closed

bind:clientWidth doesn't update for resizable element #6127

colah opened this issue Mar 25, 2021 · 9 comments

Comments

@colah
Copy link

colah commented Mar 25, 2021

Describe the bug
<textarea bind:clientWidth> doesn't update clientWidth when textarea is resized by user.

To Reproduce
repl example

Expected behavior
On user resize of textarea, I expected the bound value to update. Instead, the values stay stuck at the initial size.

Severity
Low. This is easy to work around, it would just be cleaner if this worked. Or in the alternative, if the documentation made it clear this wouldn't work.

@colah
Copy link
Author

colah commented Mar 25, 2021

Initial state is correct:
image
After user resize, it is incorrect:
image

@Prinzhorn
Copy link
Contributor

Prinzhorn commented Mar 26, 2021

These are "Block-level element bindings", textarea is not a block-level element. The current implementation cannot work for textarea, see:

#4233
#5524

But I think there should be a warning in this case.

As a workaround wrap the element, but I think you are already aware of that https://svelte.dev/repl/9883af1a955148f0a57ca9caefa59e61?version=3.35.0

@Valexr
Copy link

Valexr commented Mar 26, 2021

bind:this={node} > node.clientWidth...

@Prinzhorn
Copy link
Contributor

bind:this={node} > node.clientWidth...

@Valexr maybe I misunderstand your comment, but this is not reactive. You'd have to poll it (e.g. using raf) which can be expensive because the browser might have to do layout every single time you access the clientWidth property even though the size rarely changes. That's the reason why solutions like this exist in the first place because polling is (usually) expensive.

@Valexr
Copy link

Valexr commented Mar 26, 2021

@colah
Copy link
Author

colah commented Mar 26, 2021

D'oh, I thought "block element" referred to the CSS display property, rather than something else.

It would be nice if svelte emitted error messages when a user binds to an element that svelte doesn't support that type of binding to.

@stale
Copy link

stale bot commented Jun 26, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale
Copy link

stale bot commented Dec 24, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@Rich-Harris
Copy link
Member

Svelte 5 uses resize observers meaning this works perfectly, so I'll close this

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

No branches or pull requests

5 participants