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

onContentSizeChange support for growing multiline TextInput #6552

Closed
brentvatne opened this issue Mar 20, 2016 · 13 comments
Closed

onContentSizeChange support for growing multiline TextInput #6552

brentvatne opened this issue Mar 20, 2016 · 13 comments
Assignees
@brentvatne
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@brentvatne
Copy link
Collaborator

Original discussion here: #1229 (comment)

Problem

the onChange event that we depend upon here only fires when a user enters text via a keyboard. This means that if there is more than one line of text loaded in (e.g. resuming a form), the height will be restricted to whatever the default is. Is there any way to trigger (or measure) the contentSize so that we can set an accurate initial height?

Potential solutions

Decision that needs to be made

  • Do we push forward with onContentSizeChange? (an aside, see our justification for naming).
  • If yes:
    • do we back out of providing layout information in the onChange event from TextInput and just provide it in onContentSizeChange?
    • who will implement this on iOS?

@nicklockwood @deanmcpherson @bestander
@brentvatne brentvatne self-assigned this Mar 20, 2016
@artald artald mentioned this issue Apr 28, 2016
Closed
@mangogogos
Copy link
Contributor

Any update on this? Most of the relevant issues have gone quiet

@bestander
Copy link
Contributor

I posted internally to get some attention, sorry for the wait.
Meanwhile if this affects you and you want to raise visibility, create an entry in product pains

@janicduplessis janicduplessis mentioned this issue Jun 27, 2016
Closed
ghost pushed a commit that referenced this issue Jul 7, 2016
@janicduplessis
Implement TextInput onContentSizeChange
2537157 
Summary:
This adds proper support for tracking a TextInput content size as discussed in #6552 by adding a new callback that is called every time the content size changes including when first rendering the view.

Some points that are up for discussion are what do we want to do with the onChange callback as I don't see any use left for it now that we can track text change in onChangeText and size changes in onContentSizeChange. Also a bit off topic but should we consider renaming onChangeText to onTextChange to keep the naming more consistent (see [this naming justification](https://twitter.com/notbrent/status/709445076850597888)).

This is split in 2 commits for easier review, one for iOS and one for android.

The iOS implementation simply checks if the content size has changed everytime we update it and fire the callback, the only small issue was that the content size had several different values on initial render so I added a check to not fire events before the layoutSubviews where at this point the value is g
Closes #8457

Differential Revision: D3528202

Pulled By: dmmiller

fbshipit-source-id: fefe83f10cc5bfde1f5937c48c88b10408e58d9d
samerce pushed a commit to iodine/react-native that referenced this issue Aug 23, 2016
@janicduplessis @samerce
Implement TextInput onContentSizeChange
f6e37e7 
Summary:
This adds proper support for tracking a TextInput content size as discussed in facebook#6552 by adding a new callback that is called every time the content size changes including when first rendering the view.

Some points that are up for discussion are what do we want to do with the onChange callback as I don't see any use left for it now that we can track text change in onChangeText and size changes in onContentSizeChange. Also a bit off topic but should we consider renaming onChangeText to onTextChange to keep the naming more consistent (see [this naming justification](https://twitter.com/notbrent/status/709445076850597888)).

This is split in 2 commits for easier review, one for iOS and one for android.

The iOS implementation simply checks if the content size has changed everytime we update it and fire the callback, the only small issue was that the content size had several different values on initial render so I added a check to not fire events before the layoutSubviews where at this point the value is g
Closes facebook#8457

Differential Revision: D3528202

Pulled By: dmmiller

fbshipit-source-id: fefe83f10cc5bfde1f5937c48c88b10408e58d9d
mpretty-cyro pushed a commit to HomePass/react-native that referenced this issue Aug 25, 2016
@janicduplessis
Implement TextInput onContentSizeChange
d5c1ea7 
Summary:
This adds proper support for tracking a TextInput content size as discussed in facebook#6552 by adding a new callback that is called every time the content size changes including when first rendering the view.

Some points that are up for discussion are what do we want to do with the onChange callback as I don't see any use left for it now that we can track text change in onChangeText and size changes in onContentSizeChange. Also a bit off topic but should we consider renaming onChangeText to onTextChange to keep the naming more consistent (see [this naming justification](https://twitter.com/notbrent/status/709445076850597888)).

This is split in 2 commits for easier review, one for iOS and one for android.

The iOS implementation simply checks if the content size has changed everytime we update it and fire the callback, the only small issue was that the content size had several different values on initial render so I added a check to not fire events before the layoutSubviews where at this point the value is g
Closes facebook#8457

Differential Revision: D3528202

Pulled By: dmmiller

fbshipit-source-id: fefe83f10cc5bfde1f5937c48c88b10408e58d9d
@holyxiaoxin
Copy link
Contributor

How is onContentSizeChange getting fired? I'm on Android and react-native v0.32.0, multiline is true. I only get onContentSizeChange fired for the first time, after that it doesn't fire even after i'm hitting the next line.

@ghost
Copy link

ghost commented Sep 22, 2016

Our application has tons of forms that are paused and resumed at a later date, and currently this issue alone is making react-native a headache for us.

@jayshah123
Copy link
Contributor

Checking on v0.33 rn on android, multiline is true.
I only get onContentSizeChange fired for the first time, after that it doesn't fire even after i'm hitting the next line.

@oargaruna
Copy link

Issue reported by @jayshah123 and @holyxiaoxin still persists on v0.34. For now I am using both onChange and onContentSizeChange. The former for Android and the latter for iOS.

@snowjade
Copy link

snowjade commented Oct 8, 2016

Oh ,I get the same issue too as reported by @jayshah123 and @holyxiaoxin

@lededje lededje mentioned this issue Oct 22, 2016
Open
@sibelius
Copy link

onContentSizeChange is not working on 0.37

@vaibhawc
Copy link

is it still on there?

@aleclarson
Copy link
Contributor

FWIW TextInput + props.onContentSizeChange + props.multiline is working as intended for me
(using 0.37.0)

@muszu
Copy link

muszu commented Jan 2, 2017

It's still on there :)
onContentSizeChange on Android is fired only once (^0.39.0-rc.0), works fine on iOS.

@huangmr
Copy link

huangmr commented Jan 3, 2017

the issue is in 0.38.1

@0xc1c4da 0xc1c4da mentioned this issue Jan 29, 2017
Closed
@alwx alwx mentioned this issue Jan 30, 2017
Closed
@ericvicenti
Copy link
Contributor

Looks like this is fixed in newer versions of RN

jainkuniya added a commit to jainkuniya/zulip-mobile that referenced this issue Mar 26, 2017
@jainkuniya
Chnage height of composeBox Input on multiline.
102d3e8 
In Android onContentSizeChange is called only once
use onChange instead of onContentSizeChange.

(http://stackoverflow.com/questions/41670903/oncontentsizechange-not-firing-on-height-change-on-android-react-native,
facebook/react-native#6552 (comment))
jainkuniya added a commit to jainkuniya/zulip-mobile that referenced this issue Mar 26, 2017
@jainkuniya
Chnage height of composeBox Input on multiline.
b3b7544 
In Android onContentSizeChange is called only once
use onChange instead of onContentSizeChange.

(http://stackoverflow.com/questions/41670903/oncontentsizechange-not-firing-on-height-change-on-android-react-native,
facebook/react-native#6552 (comment))
jainkuniya added a commit to jainkuniya/zulip-mobile that referenced this issue Mar 26, 2017
@jainkuniya
Change height of composeBox Input when it becomes multiline.
3ac77e8 
In Android onContentSizeChange is called only once
used onChange instead of onContentSizeChange.

(http://stackoverflow.com/questions/41670903/oncontentsizechange-not-firing-on-height-change-on-android-react-native,
facebook/react-native#6552 (comment))
jainkuniya added a commit to jainkuniya/zulip-mobile that referenced this issue Mar 31, 2017
@jainkuniya
Change height of composeBox Input when it becomes multiline.
eb192a5 
In Android onContentSizeChange is called only once
used onChange instead of onContentSizeChange.

(http://stackoverflow.com/questions/41670903/oncontentsizechange-not-firing-on-height-change-on-android-react-native,
facebook/react-native#6552 (comment))
jainkuniya added a commit to jainkuniya/zulip-mobile that referenced this issue Apr 11, 2017
@jainkuniya
Change height of composeBox Input when it becomes multiline.
94505b0 
In Android onContentSizeChange is called only once
used onChange instead of onContentSizeChange.

(http://stackoverflow.com/questions/41670903/oncontentsizechange-not-firing-on-height-change-on-android-react-native,
facebook/react-native#6552 (comment))
jainkuniya added a commit to jainkuniya/zulip-mobile that referenced this issue Apr 25, 2017
@jainkuniya
Change height of composeBox Input when it becomes multiline.
440d028 
In Android onContentSizeChange is called only once
used onChange instead of onContentSizeChange.
(http://stackoverflow.com/questions/41670903/oncontentsizechange-not-firing-on-height-change-on-android-react-native,
facebook/react-native#6552 (comment))

set default height after sending message.
@alwx alwx mentioned this issue Apr 28, 2017
Merged
jainkuniya added a commit to jainkuniya/zulip-mobile that referenced this issue May 9, 2017
@jainkuniya
Change height of composeBox Input when it becomes multiline.
08d9480 
In Android onContentSizeChange is called only once
used onChange instead of onContentSizeChange.
(http://stackoverflow.com/questions/41670903/oncontentsizechange-not-firing-on-height-change-on-android-react-native,
facebook/react-native#6552 (comment))

set default height after sending message.
SteffeyDev added a commit to SteffeyDev/react-native-material-textfield that referenced this issue May 9, 2017
@SteffeyDev
Fix for Growing Multiline Inputs in RN > 0.40
a0b50c4 
In more recent version of RN, the onContentSizeChange is only called
with the initial size, and onChange is called thereafter.  See
facebook/react-native#6552 (comment)
962
@SteffeyDev SteffeyDev mentioned this issue May 9, 2017
Merged
jainkuniya added a commit to jainkuniya/zulip-mobile that referenced this issue May 22, 2017
@jainkuniya
Change height of composeBox Input when it becomes multiline.
6846cf5 
In Android onContentSizeChange is called only once
used onChange instead of onContentSizeChange.
(http://stackoverflow.com/questions/41670903/oncontentsizechange-not-firing-on-height-change-on-android-react-native,
facebook/react-native#6552 (comment))

set default height after sending message.
jainkuniya added a commit to jainkuniya/zulip-mobile that referenced this issue May 24, 2017
@jainkuniya
Change height of composeBox Input when it becomes multiline.
c74dd14 
In Android onContentSizeChange is called only once
used onChange instead of onContentSizeChange.
(http://stackoverflow.com/questions/41670903/oncontentsizechange-not-firing-on-height-change-on-android-react-native,
facebook/react-native#6552 (comment))

set default height after sending message.
borisyankov pushed a commit to zulip/zulip-mobile that referenced this issue May 25, 2017
@jainkuniya @borisyankov
Change height of composeBox Input when it becomes multiline.
8297fdc 
In Android onContentSizeChange is called only once
used onChange instead of onContentSizeChange.
(http://stackoverflow.com/questions/41670903/oncontentsizechange-not-firing-on-height-change-on-android-react-native,
facebook/react-native#6552 (comment))

set default height after sending message.
@facebook facebook locked as resolved and limited conversation to collaborators Jul 20, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 20, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@brentvatne brentvatne

Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests