Skip to content

useTextareaAutosize adds a scrollbar for elements with box-sizing: border-box and a border #3133

@lrosenfeldt

Description

@lrosenfeldt

Describe the bug

When useTextareaAutosize is used on a textarea with box-sizing: border-box and a border is added an unneccessary scrollbar comes in.

I believe this could be fixed, if one would allow to pass the box option to the underlying useResizeObserver. I already tried it in the playground and seems to work: vueuuse-playground but I'm unsure of the implications.

I would be willing to create a PR for this, if it's ok to add the extra options to the composable.

Thank you very much for the project!

Reproduction

https://play.vueuse.org/#N4IgDghgxg1hDmBTAziAXAbVAOwgW0XRADcBXRAWgBNE8BLEAGhGQHtSAnKQtEU7MDHhMQNZFA50wAFzqtsRAGrkABABFadFQAoAFhAA2AMxV1sKgGIdE2KLoCUp5CogqaxRAdZgz8FaVkDOmkATxcDLwB3ZxD2FWlWFUjJaUQVAFVsOg8OZEMVZTSAGToAIw4ISRQVI1YOAtUAJhUAMhUAZhFOAyJdaWkwZDQAemH+QXgAOihWPGGyShp6YaDS4bMaAA9JvAArVABfRhx8HhAAAQXSZERh5H1rKhE2Tm4icaERMQkpWXkiADKD0QVAaiHSN38gWCdBQky6HB6vD6AyGow+Uxmc0u5Gut3ulRB5wAjAAGSbEyak9bYLY7fYgI4nAhEHGIPHDGbWZ7sLhnDFfFA-GRyBS8ADCrAiiCgf3MrBMKBu2Fk+UKKkleDArGQMPkGWhshQCKRIBRgxGYwEQmms2GbI5XMQJPJlOpG0Q2z2hwAuswjHQDMa0KAAIJgMCTBboUCpLUGCCpIgAHio2RUaGQoSDAF4ADogZIQCOIDgA7MoAsAPjz5hUydSm2khNc1iM+ZAjeb1ggBZUxAoeFYNAMHbMYACfczFY7WZCQeQfeGNewyeGaeIVeewukRDoWrq0hUwH8NwAKp7u4gIKGAjq6AAvNIHGocWYqADkDpunLqiA-ta1jM2BZseAAFXYtowpgCAEKgvjmp6IBeTYtreCS6k+2j2AA3IBtjyKBc4LioiHALWKgqNYmGIGgn7YPI-6MBRKgzF4HB0R+pQJrAH7MXWpSsJsAKPr4nGCRwNAcBQgmbHxLGRHQVDSLonFkqSACk8kCXUUlqWAmwqGwQSgnUEDYEgAHYAc+HAaBRYlmWFbOGRLFpsgYAJiEnFGEGcn8ZRuzXLIRghJKKo2NInEedAlClIg0iRIgNjaZRinKapn7qVp-EHDhjIHAcQA

System Info

System:
    OS: macOS 13.3.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 59.75 MB / 16.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.16.0 - ~/.volta/tools/image/node/18.16.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 9.5.1 - ~/.volta/tools/image/node/18.16.0/bin/npm
    Watchman: 2023.05.22.00 - /opt/homebrew/bin/watchman
  npmPackages:
    @vueuse/components: 10.0.2 => 10.0.2
    @vueuse/core: 10.0.2 => 10.0.2
    vue: 3.3.1 => 3.3.1

Used Package Manager

yarn

Validations

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions