wearebraid / vue-formulate

⚡️ The easiest way to build forms with Vue.
https://vueformulate.com
MIT License
2.25k stars 245 forks source link

textarea emits false immediately after value when wrapped in conditional statement in tsx template #567

Open hisuwh opened 1 year ago

hisuwh commented 1 year ago

Describe the bug When conditionally rendering a textarea component using tsx templates it first emits the character typed followed by the value false

To Reproduce Steps to reproduce the behavior:

Given a component like this:

import type { VNode } from "vue";
import { Component, Vue } from "vue-property-decorator";

const typeOptions = [
    { value: "text", label: "Text" },
    { value: "select", label: "Dropdown" }
];

@Component
export class MyForm extends Vue {

    private values: any = {};

    public render(): VNode {
        return (
            <formulate-form
                v-model={this.values}
            >
                <formulate-input
                    name="type"
                    label="Type"
                    type="select"
                    options={typeOptions}
                    validation="required"
                />

                {this.values?.type === "select" && (
                    <formulate-input
                        name="selectOptions"
                        label="Options"
                        type="textarea"
                        help="Enter a new line for each option"
                        onInput={this.onOptionsInput}
                        validation="required"
                    />
                )}
            </formulate-form>
        );
    }

    private onOptionsInput(value) {
        console.log("options: ", value);
    }
}
  1. Select the select/dropdown type
  2. Type something in the newly shown options text area

Expected behavior It should show the value you typed in the textarea It should only log once for each key press and it should log only what was typed

Actual behaviour It logs twice:

Screenshots image

Device information:

Notes:

hisuwh commented 1 year ago

@justin-schroeder sorry for the bump but there seems to be a number of issues on this repo without any response/acknowledgement.

I know you guys are all in on FormKit which looks awesome, but I'm blocked from upgrading to Vue 3 currently due to a number of other dependencies not supporting it.