Android Slider cannot be disabled with isUserInteractionEnabled='false'

[cjohn001]

Issue Description

On Android using Angular it is not possible to disable a Slider with isUserInteractionEnabled='false'

Reproduction

No response

Relevant log output (if applicable)

No response

Environment

OS: macOS 12.6
CPU: (10) arm64 Apple M1 Pro
Shell: /bin/zsh
node: 18.1.0
npm: 8.8.0
nativescript: 8.3.3

# android
java: 11.0.16.1
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 14.0.1/14A400
cocoapods: 1.11.3
python: 3.9.14
python3: 3.9.6
ruby: 2.7.6
platforms: 
  - DriverKit 21.4
  - iOS 16.0
  - macOS 12.3
  - tvOS 16.0
  - watchOS 9.0

Dependencies

"dependencies": {
  "@angular/animations": "14.2.4",
  "@angular/common": "14.2.4",
  "@angular/compiler": "14.2.4",
  "@angular/core": "14.2.4",
  "@angular/forms": "14.2.4",
  "@angular/platform-browser": "14.2.4",
  "@angular/platform-browser-dynamic": "14.2.4",
  "@angular/router": "14.2.4",
  "@apollo/client": "3.6.10",
  "@mnd/external-web-view": "file:../mnd-plugins/dist/packages/external-web-view/mnd-external-web-view-1.0.0.tgz",
  "@nativescript/angular": "14.2.4",
  "@nativescript/core": "8.3.5",
  "@nativescript/iqkeyboardmanager": "2.0.0",
  "@nativescript/localize": "5.0.4",
  "@nativescript/mlkit-barcode-scanning": "1.0.6",
  "@nativescript/mlkit-core": "1.0.6",
  "@nativescript/secure-storage": "3.0.0",
  "@nativescript/theme": "3.0.2",
  "@nativescript/ui-charts": "0.2.4",
  "apollo-angular": "4.0.1",
  "apollo3-cache-persist": "0.14.1",
  "d3-ease": "3.0.1",
  "graphql": "16.6.0",
  "graphql-tag": "2.12.6",
  "intl": "1.2.5",
  "moment": "2.29.4",
  "nativescript-health-data": "file:../mnd-custom-plugins/nativescript-health-data/publish/package/nativescript-health-data-2.0.0.tgz",
  "nativescript-oauth2-ext": "file:../mnd-custom-plugins/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.0.tgz",
  "nativescript-sqlite": "2.8.6",
  "nativescript-ui-autocomplete": "14.2.1",
  "nativescript-ui-calendar": "14.2.1",
  "nativescript-ui-gauge": "14.2.1",
  "rxjs": "7.5.7",
  "uuid": "9.0.0",
  "zone.js": "0.11.8"
},
"devDependencies": {
  "@angular-devkit/build-angular": "14.2.4",
  "@angular/compiler-cli": "14.2.4",
  "@graphql-codegen/cli": "2.13.1",
  "@graphql-codegen/fragment-matcher": "3.3.1",
  "@graphql-codegen/introspection": "2.2.1",
  "@graphql-codegen/typescript": "2.7.3",
  "@graphql-codegen/typescript-apollo-angular": "3.5.3",
  "@graphql-codegen/typescript-operations": "2.5.3",
  "@nativescript/android": "8.3.1",
  "@nativescript/ios": "8.3.3",
  "@nativescript/types": "8.3.1",
  "@nativescript/webpack": "5.0.8",
  "@ngtools/webpack": "14.2.4",
  "@types/d3-ease": "3.0.0",
  "@types/intl": "1.2.0",
  "@types/node": "18.7.23",
  "@types/uuid": "8.3.4",
  "keycloak-request-token": "0.1.0",
  "rimraf": "3.0.2",
  "sass": "1.55.0",
  "ts-node": "10.9.1",
  "typescript": "4.7.4"
}

Please accept these terms

• [X] I have searched the existing issues as well as StackOverflow and this has not been posted before
• [X] This is a bug report
• [X] I agree to follow this project's Code of Conduct

[CatchABus]

@cjohn001 Can you try disabling it using property isEnabled instead?

[cjohn001]

@CatchABus Yes using isEnabled is indeed working. However, the style of the slider then changes to semitransparent which I do not want and I seem to not be able to overwrite the style with a custom css class.

[vallemar]

@cjohn001 you can use this code for android: https://stackblitz.com/edit/nativescript-stackblitz-templates-yacfbs?file=app%2Fcomponents%2FHome.vue&title=NativeScript%20Starter%20Vue

Source: https://stackoverflow.com/questions/16284219/disable-changes-on-seekbar-by-client

[cjohn001]

@vallemar, thanks for publishing the workaround, I found one already. However, would be nice to see the source of the issue fixed.

[vallemar]

@cjohn001 what has been your solution? I want to do a PR on the core and I would like to see your approach

[cjohn001]

@vallemar, I have one slider without functionality and another one as overlay and switch visibility between them. This works for me as the disabled position of the slider is always the same.

[CatchABus]

@cjohn001 what has been your solution? I want to do a PR on the core and I would like to see your approach

Perhaps, one good solution would be to add a boolean check in there: https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/core/view/index.android.ts#L99

Though, we have to know how this affects touch propagation among parent and child.

[cjohn001]

@CatchABus: My solution is actually nothing to recommend. As mentioned I simply switch visibility between two sliders:

[vallemar]

I think it would be best to overwrite this class https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/slider/index.android.ts#L51 the isUserInteractionEnabled property

[CatchABus]

I think it would be best to overwrite this class https://github.com/NativeScript/NativeScript/blob/main/packages/core/ui/slider/index.android.ts#L51 the isUserInteractionEnabled property

It's a problem that actually affects a dozen of android widgets. ListView is one of them. :/