Skip to content

Nativescript Vue - iOS - TextField is not assignable to type #47

@keithoys

Description

@keithoys

Below is the error I'm facing:

TS2322: Type 'import("/Users/keith/Desktop/nativescript-vue/plugins/node_modules/@nativescript/core/ui/text-field/text-field").TextField' is not assignable to type 'import("/Users/keith/Desktop/nativescript-vue/node_modules/@nativescript/core/ui/text-field/text-field").TextField'.
The types of 'formattedText.spans.on' are incompatible between these types.
Type '{ (eventNames: string, callback: (data: import("/Users/keith/Desktop/nativescript-vue/plugins/node_modules/@nativescript/core/data/observable/observable").EventData) => void, thisArg?: any): any; (event: "change", callback: (args: import("/Users/keith/Desktop/nativescript-vue/plugins/node_modules/@nativescript...' is not assignable to type '{ (eventNames: string, callback: (data: import("/Users/keith/Desktop/nativescript-vue/node_modules/@nativescript/core/data/observable/observable").EventData) => void, thisArg?: any): any; (event: "change", callback: (args: import("/Users/keith/Desktop/nativescript-vue/node_modules/@nativescript/core/data/observable-arra...'.
Types of parameters 'callback' and 'callback' are incompatible.
Types of parameters 'args' and 'data' are incompatible.
Type 'EventData' is missing the following properties from type 'ChangedData<Span>': action, index, removed, addedCount

Here is my code snippet:

<StackLayout class="my-class" orientation="vertical" @loaded="onWrapperLoaded">
...

      <TextField
        id="myTextField"
        :class="{ 'empty-styling': isEmpty }"
        :editable="true"
        v-model.trim="textFieldValue"
        textAlignment="right"
        android:inputType="number"
        keyboardType="phone"
        @returnPress="$emit('returnPress')"
        @textChange="textChange"
        @focus="textChange($event, 'focus')"
        :hint="Enter Here"
      />

...

import { EventData } from 'tns-core-modules/data/observable';
import { TextField } from '@nativescript/core';
import { View } from 'tns-core-modules/ui/core/view';
import { NumericKeyboard } from 'nativescript-numeric-keyboard';

...

  private onWrapperLoaded(args: EventData): void {
    const textField = (args.object as View).page.getViewById('myTextField') as TextField;
    new NumericKeyboard().decorate({
      textField: textField,
      returnKeyTitle: 'OK',
      locale: 'en_US',
      noDecimals: false,
      noIpadInputBar: true, // suppress the bar with buttons iOS renders on iPad since iOS 9
      onReturnKeyPressed: (): boolean => {
        return true; // Return true to hide/collapse the keyboard, use false to keep the keyboard in place.
      },
    });
  }

Here is my environment:

iOS
14.5

node -v
14.15.0

npm -v
6.14.8

tns -v
8.0.1

nativescript -v
8.0.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions