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

feat(form-textarea): add `noAutoShrink` prop (closes #2664) #2666

Merged
merged 17 commits into from Feb 23, 2019
Merged
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -47,7 +47,7 @@ export default {
computed: {
computedStyle() {
return {
// setting noResize to true will disable the ability for the user to
// Setting `noResize` to true will disable the ability for the user to
// resize the textarea. We also disable when in auto resize mode
resize: !this.computedRows || this.noResize ? 'none' : null,
// The computed height for auto resize
@@ -65,17 +65,21 @@ export default {
return this.computedMinRows === this.computedMaxRows ? this.computedMinRows : null
},
computedHeight() /* istanbul ignore next: can't test getComputedProperties */ {
const el = this.$el

if (this.isServer) {
return null
}
// We compare this.localValue to null to ensure reactivity of content changes.
if (this.localValue === null || this.computedRows || this.dontResize || this.$isServer) {
// We compare `computedRows` and `localValue` to `true`, a value
// they both can't have at any time, to ensure reactivity
if (
this.$isServer ||
this.dontResize ||
this.computedRows === true ||
this.localValue === true
) {
return null
}

// Element must be visible (not hidden) and in document. *Must* be checked after above.
const el = this.$el

// Element must be visible (not hidden) and in document
// *Must* be checked after above
if (!isVisible(el)) {
return null
}
@@ -98,14 +102,19 @@ export default {
(parseFloat(computedStyle.paddingBottom) || 0)
// Calculate content height in "rows"
const contentRows = (el.scrollHeight - offset) / lineHeight
// Put the old height back (needed when new height is equal to old height!)
el.style.height = oldHeight
This conversation was marked as resolved by jackmu95

This comment has been minimized.

Copy link
@tmorehouse

tmorehouse Feb 20, 2019

Member

This line is needed to handle certain edge cases when changing the height.

This comment has been minimized.

Copy link
@tmorehouse

tmorehouse Feb 20, 2019

Member

Note that this is altering the element directly, not returning a value.

This comment has been minimized.

Copy link
@tmorehouse

tmorehouse Feb 20, 2019

Member

And this also triggers a reflow on the element. Can't be placed inside an "if", as it is needed to be able to compute the current height of the textarea content.

// Calculate number of rows to display (limited within min/max rows)
const rows = Math.min(Math.max(contentRows, this.computedMinRows), this.computedMaxRows)
// Calulate the required height of the textarea including border and padding (in pixels)
// Calculate the required height of the textarea including border and padding (in pixels)
const height = Math.max(Math.ceil(rows * lineHeight + offset), minHeight)

// return the new computed height in px units
// Put the old height back when new height is equal or less
const oldHeightPx = parseFloat(oldHeight) || 0
if (oldHeightPx >= height) {
el.style.height = oldHeight
return oldHeight
}

// Return the new computed height in px units
return `${height}px`
}
},
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.