Cnilton / react-native-floating-label-input

A customizable React Native TextInput with its placeholder always shown. Includes masks, global styles, character count, and a bunch else.
MIT License
291 stars 59 forks source link

Multiline Android React native always focus last charater not Top #121

Closed harshal311989 closed 2 years ago

harshal311989 commented 2 years ago

hi team,

I used this plugin in my application and i add multimine={true} for support multiple line in my text filed so when i run application in android and i set long text on that it is always focus at bottom which i add last not focus top . Refer my video it will give better idea

https://user-images.githubusercontent.com/75067288/163573654-45460c5f-81a1-408f-88ea-27006968126b.mov

Any idea how can i fix this ? in iOS it is working fine issue only in Android .

My code as below

   `export default function App() {
    const [cont, setCont] = useState('fskjhfsfskjhfsdkjfhfskjhfsdkjfhfskjhfsdkjfhfskjhfsdkjfhfskjhfsdkjfhfskjhfsdkjfhdkjfh, 
   fskjhfsdkjfh, fskjhfsdkjfh , fskjhfsdkjfh,  fskjhfsdkjfh, ,fskjhfsdkjfh fskjhfsdkjfh hdsfdskjfhdsjkfhsdfhdk dsjfhdskjfhsdjkfhdjhfk 
  shfdkjhf dfhdskjfhdskhfdjksfhdjkhfkjsdfhdksjhfdksjhf ds');

  return (
   <View style={{ padding: 50, flex: 1, backgroundColor: '#fff',  }}>
     <FloatingLabelInput
      label={'label'}
      multiline
      inputStyles={{minHeight:30, maxHeight:80, }}
      value={cont}
      onChangeText={value => {
         setCont(value)

        }}
     />
   </View>
   );
 }`
Cnilton commented 2 years ago

Hi @harshal311989, I'm afraid this is the default behavior on android. But you could get over it with the selection prop and maybe a boolean useState variable for controlling when render has occured and then setting selection to undefined like:

// ...
const [value, setValue] = useState('fskjhfsfskjhfsdkjfhfskjhfsdkjfhfskjhfsdkjfhfskjhfsdkjfhfskjhfsdkjfhfskjhfsdkjfhdkjfh, 
   fskjhfsdkjfh, fskjhfsdkjfh , fskjhfsdkjfh,  fskjhfsdkjfh, ,fskjhfsdkjfh fskjhfsdkjfh hdsfdskjfhdsjkfhsdfhdk dsjfhdskjfhsdjkfhdjhfk 
  shfdkjhf dfhdskjfhdskhfdjksfhdjkhfkjsdfhdksjhfdksjhf ds')

const [rendered, setRendered] = useState(false)

useEffect(()=>{
setRendered(true)
},[]}

<FloatingLabelInput
multiline
value={value}
onChangeText={setValue}
selection={!rendered? {start:0, end:0}: undefined}
/>

// ...
harshal311989 commented 2 years ago

@Cnilton yes working .

Cnilton commented 2 years ago

Thanks for the quick response @harshal311989! I'll close this issue now.