gabrieldonadel / rn-material-ui-textfield

Material UI textfield
https://www.npmjs.com/package/rn-material-ui-textfield
Other
37 stars 31 forks source link

On click on 1st textField, cursor shows up on next textfield when 2 textfields are in row. #48

Open bhavinatharva opened 2 years ago

bhavinatharva commented 2 years ago

two FilledTextField in a row, focusing 2nd one not the first one

 focusable={false}
autoFocus={false}
autoCorrect={false}

these properties are also not working for the same

 <View
          style={[
            styles.container,
            this.state.hasFocus ? styles.active : null,
            errorMessage ? styles.bottomBorder : null,
          ]}>
          <View key="CountryCode" style={countryCodeStyle}>
            <TouchableOpacity
              onPress={() => onPressCountry()}
              activeOpacity={0.5}>
              <FilledTextField
                {...this.props}
                ref={ref => (this.countryInputRef = ref)}
                key="CountryCode"
                defaultValue={countryCode}
                label={placeholderCode}
                value={countryCode}
                lineWidth={0}
                fontSize={FontsSize.font12}
                labelFontSize={FontsSize.font10}
                inputContainerStyle={[
                  this.state.hasFocus ? styles.inputText : styles.inputTextBlur,
                ]}
                lineType={'none'}
                selectionColor={colors.FROLY}
                labelOffset={{y0: -3}}
                labelTextStyle={styles.labelTextStyle}
                baseColor={colors.COMET}
                tintColor={colors.COMET}
                error={errorMessage}
                onChangeText={text =>
                  handleChangeText(text.replace(/[^0-9]/g, ''))
                }
                onFocus={this.onFocusCountryCode}
                onBlur={this.onBlurCountryCode}
                titleTextStyle={styles.labelTextStyle}
                disabledLineWidth={0}
                editable={false}
                keyboardType="numeric"
              />
            </TouchableOpacity>
            <View style={{position: 'absolute', end: 0}}>
              <TouchableOpacity onPress={() => onPressCountry()}>
                <Image
                  source={Assets.ic_down_arrow}
                  style={styles.selectIcon}
                />
              </TouchableOpacity>
            </View>
          </View>

          <View
            key="MobileNumber"
            style={{flex: 0.8}}
            focusable={false}
            onStartShouldSetResponder={() => false}>
            <FilledTextField
              key="MobileNumber"
              {...this.props}
              ref={ref => (this.inputRef = ref)}
              label={label}
              value={value}
              lineWidth={0.5}
              fontSize={FontsSize.font12}
              labelFontSize={FontsSize.font10}
              inputContainerStyle={[
                this.state.hasFocus ? styles.inputText : styles.inputTextBlur,
              ]}
              lineType={'none'}
              pointerEvents={pointerEvent}
              selectionColor={colors.FROLY}
              labelOffset={{y0: -3}}
              labelTextStyle={styles.labelTextStyle}
              baseColor={colors.COMET}
              tintColor={colors.COMET}
              error={errorMessage}
              onChangeText={text =>
                handleChangeText(text.replace(/[^0-9]/g, ''))
              }
              onFocus={this.onFocusCallback}
              onBlur={this.onBlurBack}
              titleTextStyle={styles.labelTextStyle}
              editable={isEditable}
              keyboardType="numeric"
            />
          </View>
        </View>

Demo : https://www.loom.com/share/647d830245e147de9ab0c75a2d376cb7

gabrieldonadel commented 2 years ago

@bhavinatharva do you mind sharing a small demo?

bhavinatharva commented 2 years ago

@gabrieldonadel Yes

Please have a look. https://www.loom.com/share/647d830245e147de9ab0c75a2d376cb7

catype commented 2 years ago

Hi! @gabrieldonadel It is the same issue closed for some reasons, since loom links above seems dead, here you can see the issue.

catype commented 2 years ago

As workaround, you can set different zIndexes for these selects, it works for me

chromakeeey commented 1 year ago
labelTextStyle={{
  position: 'absolute',
  left: '100%'
}}