Make entire inputbar clickable instead of only text/placeholder text

[sepcol]

Hey @WrathChaos

I'm very impressed with the component and I really like it in my application! 🥳 I only spotted 1 issue when I was testing my functionality.

So when I want to enter some text in the Inputbar I can only click on the placeholder text. Can I change something so the keyboard pops up even when I press on the whitespace on the right?

^On this device the width is not much, but on my android phone I have A LOT of whitespace so I can only enter text whenever I directly press on the placeholder text.

This issue becomes even more troublesome when I edit the text and only enter 1 character and then close the keyboard. Now the space to click on the Inputbar becomes even smaller

I hope I described the issue good enough, if not just let me know 👍

Thanks for your hard work!

[WrathChaos]

Hello @sepcol, I've tried on example project and it simply autofocus when I press the whitespace part. Can you share with me a minimal reproducible example?

[sepcol]

Hmm it's good to hear that it should work. I'll see if I can create a minimal reproducible example app that I can share.

[sepcol]

Maybe it's helpful:

My page consists of a scrollview with items and I display the InputBar on the bottom of the page, so you can see the InputBar wherever u scroll to.

<ScrollView>
    I render here some cards
</ScrollView>

<View style={{flex: 1}}>
    <InputBar autoCompleteType={"off"} autoCorrect={false} multiline={true} maxLength={220} borderRadius={0}
        style={keyboardVisible ? {bottom: 70, width: "100%" } : {bottom: 0, width: "100%" }} numberOfLines={4}
        blurOnSubmit={true} onSubmitEditing={()=> Keyboard.dismiss()}
        onSendPress={() => **{**
        Keyboard.dismiss();
        }} value={missionDetailAnswer} onChangeText={(text) => setDetailAnswer(text)}
        textInputStyle={{
                              fontWeight: 'bold',
                              fontSize: 15,
                              marginTop: 0,
                              marginLeft: 15,
                              marginRight: 55
                          }} disableSecondaryIcon={true}
        placeholder={i18n.t("testScreen.addAnswer") + " "}/>
</View>

[WrathChaos]

@sepcol,

Your textInputStyle breaking the TextInput. Do not use margins. Why do you even need them?

[sepcol]

@WrathChaos I see...

I added them because otherwise I get this:

[sepcol]

Instead of using the margins like you mentioned, I used padding's and it seems to work perfect 👍