text-input was missing from merging

Infineon · Jun 30, 2023 · 6576f0f · 6576f0f
1 parent ad3a51d
commit 6576f0f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 20 deletions.
diff --git a/examples/wrapper-components/vue-javascript/src/components/TextInput.vue b/examples/wrapper-components/vue-javascript/src/components/TextInput.vue
@@ -15,7 +15,15 @@ import { ref, computed } from 'vue';
 
 let input = ref("");
 
-
+// Computed property to retrieve the query value
+const textInput = computed({
+  get: () => input.value,
+  set: (newValue) => handleInput(newValue)
+});
+function handleInput(event) {
+  console.log("updating input: ", event)
+  input.value = event; //v-model automatically accesses event.detail
+};
 </script>
 
 

diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -368,7 +368,7 @@ export const IfxTextInput = /*@__PURE__*/ defineContainer<JSX.IfxTextInput, JSX.
   'disabled',
   'readonly',
   'icon',
-  'ifxInput'
+  'ifxChange'
 ],
 'value', 'ifxInput');
 
diff --git a/packages/components/src/components/text-input/readme.md b/packages/components/src/components/text-input/readme.md
@@ -21,9 +21,9 @@
 
 ## Events
 
-| Event      | Description | Type               |
-| ---------- | ----------- | ------------------ |
-| `ifxInput` |             | `CustomEvent<any>` |
+| Event       | Description | Type                            |
+| ----------- | ----------- | ------------------------------- |
+| `ifxChange` |             | `CustomEvent<CustomEvent<any>>` |
 
 
 ## Dependencies

diff --git a/packages/components/src/components/text-input/text-input.tsx b/packages/components/src/components/text-input/text-input.tsx
@@ -1,38 +1,44 @@
-import { Component, h, Event, Element, Prop, State, EventEmitter, Watch } from '@stencil/core';
+import { Component, h, Event, Element, Prop, EventEmitter, Watch } from '@stencil/core';
 
 @Component({
   tag: 'ifx-text-input',
   styleUrl: 'text-input.scss',
   shadow: true
 })
+
 export class TextInput {
   @Element() el;
   @Prop() placeholder: string = "Placeholder"
+  private inputElement: HTMLInputElement;
 
-  @Prop() value: string = '';
-  @State() internalValue: string = '';
+  @Prop({ mutable: true }) value: string = '';
   @Prop() error: boolean = false;
   @Prop() errorMessage: string = ""
   @Prop() success: boolean = false;
   @Prop() disabled: boolean = false;
   @Prop() readonly: boolean = false;
   @Prop() icon: boolean = false;
-  @Event({ bubbles: true, composed: true }) ifxInput: EventEmitter;
+  @Event() ifxChange: EventEmitter<CustomEvent>;
 
-  componentWillLoad() {
-    this.internalValue = this.value;
-  }
 
   @Watch('value')
-  valueChanged(newValue: string, oldValue: string) {
-    if (newValue !== oldValue) {
-      this.internalValue = newValue;
+  valueWatcher(newValue: string) {
+    if (newValue !== this.inputElement.value) {
+      this.inputElement.value = newValue;
     }
   }
 
-  handleInput(e) {
-    this.internalValue = e.target.value;
-    this.ifxInput.emit(this.internalValue);
+
+  handleChange(e) {
+
+    const query = this.inputElement.value;
+    this.value = query; // update the value property when input changes
+    const customEvent = new CustomEvent('ifxChange', {
+      detail: e.target.value,
+      bubbles: true,
+      composed: true
+    });
+    this.ifxChange.emit(customEvent);
   }
 
   render() {
@@ -45,12 +51,13 @@ export class TextInput {
         </div>
         <div class="textInput__bottom-wrapper">
           <input
+            ref={(el) => (this.inputElement = el)}
             readonly={this.readonly}
             disabled={this.disabled}
             type="text"
             id='text-field'
-            value={this.internalValue}
-            onInput={(ev) => this.handleInput(ev)}
+            value={this.value}
+            onInput={(ev) => this.handleChange(ev)}
             placeholder={this.placeholder}
             class={`${this.error ? 'error' : ""} ${this.success ? "success" : ""}`} />
           {this.error &&