raynor85 / react-native-material-selectize

react-native-material-selectize/src/react-native-selectize.js

Lines 316 to 320 in 6d43dad

    
           <Text 
        
             style={hiddenTextStyle} 
        
             onLayout={this._onLayout}> 
        
             {text} 
        
           </Text>

I've found that an overlay text is being added while writting the text of a new chip. Don't know if it's purpossed for Android or iOS, but by using react-native-web it looks a bit ugly. Could you be able to clarify the purposse of that, and if so if it could be removed (maybe by an optional flag)?

Example without hidden Text hack

Example with hidden Text hack (as it should be)

To be fair, it's too over engineered, probably a simple well tuned minWidth would be more than sufficient. For your use case, feel free to remove it. Ideally you might create a pull request with an optional prop that disable the automatic new line when the input doesn't fit the container.

I see... yes, maybe the minWidth would be a better option. In my case, since it's being used internally an HTML input tag that's the reason it's showed duplicated (and in fact, the Text node it's shown on over the input, not below as your example). I'll try to take a look and see if I can be able to fix it, or at least to add the option. Thanks! :-)

I have done a quick check and with react-native-web the text field automatically expands and move to the next line if text is too long, and when removed some characters it goes back to the previous line, that I think it's the expected behaviour (both for me and you :-) ). Thinking on this, seems that's because HTML by default use the flow layout while React and ReactNative use flex layout by design, so probably that's the reason you needed to do the over-enginering hack. I think there are some modules that implement flow layout, so it could be used in that case so it would be fixed everywhere, how do you see it? :-)

autoReflow property added that defines whether the text should reflow to the new line if there is no enough space. Default is true

Great! :-) when this will be available in npm?

It's already available.

…

On Sat, 13 Jan 2018 at 09:31, Jesús Leganés-Combarro < ***@***.***> wrote: Great! :-) when this will be available in npm? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFjD9VdMhOrg4REsuuEJODFNQfgMk2P-ks5tKHfVgaJpZM4RcSXG> .

Thank you! :-D

	<Text
	style={hiddenTextStyle}
	onLayout={this._onLayout}>
	{text}
	</Text>

Overlay text