TextField and TextView not becoming editable after setting 'editable' attribute to false and then true

[volkanatalan]

Which platform(s) does your issue occur on?

• Android

Please, provide the following version numbers that your issue occurs with:

• CLI: 8.6.0
• Cross-platform modules: 8.7.2
• Runtime(s):
  • Android: 8.6.2
• Plugin(s):
  • "@nativescript-community/ui-material-textfield": "^7.2.59"
  • "@nativescript-community/ui-material-textview": "^7.2.59"

Please, tell us how to recreate the issue in as much detail as possible.

TextField component is not becoming editable and its text is not becoming selectable after setting editable attribute to false and then true.

The issue of TextView component is slightly different. When it is not editable and you tap on it, its hint starts floating.

When I made the following change in the editableProperty function, the issue was fixed:

https://github.com/nativescript-community/ui-material-components/blob/96f997ee0ee62c50904833deb657f1017e8f9200/src/textfield/textfield.android.ts#L331-L335

    [editableProperty.setNative](value) {
        super[editableProperty.setNative](value);
        const nativeView = this.nativeTextViewProtected;
        nativeView.setFocusable(value);
        if (value) {
            nativeView.setFocusableInTouchMode(true);
            nativeView.setTextIsSelectable(true);
        }
    }

I added the same code to the TextView component and it worked correctly as well.

Is there any code involved?

<template>
  <StackLayout class="p-4">
    <MdTextField hint="MdTextField 1" />
    <MdTextField :editable="!disabled" hint="MdTextField 2" />
    <Button :text="disabled ? 'Enable' : 'Disable'" @tap="onButtonTap" />
  </StackLayout>
</template>

<script>
export default {
  data() {
    return {
      disabled: true,
    };
  },
  methods: {
    onButtonTap() {
      this.disabled = !this.disabled;
    },
  },
};
</script>

The reason I added two MdTextField components is that when there is only one MdTextField, it can automatically gain focus, but when there are two, it does not focus on the non-editable one.

You can use the same code for the TextView by just changing MdTextField to MdTextView.

[farfromrefug]

@volkanatalan i actually actually reside within the N EditableTextBase Especially i would say the error is here https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/editable-text-base/index.android.ts#L182 Because it sets setFocusableInTouchMode but never set it back once editable is changed to true. Could you try with N textfield/textview to confirm?

[volkanatalan]

@farfromrefug I tested N TextField and TextView. They work correctly when I switch the editable value. Actually I don't think that that line causes the issue. Because _setInputType method is not called when editable value is changed. I tested this by adding a console.log into the method. (my top-notch debugging skills at work 😄) However, I still don't know what causes this issue.

[farfromrefug]

@volkanatalan ok thanks. Actually great to know it works with N. Will try and reproduce it here today

[volkanatalan]

@farfromrefug Did you have a chance to try it?

[farfromrefug]

@volkanatalan just published a new version which should fix it

[volkanatalan]

@farfromrefug Yes, looks like it's been fixed. Thank you very much!