Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
hisuwh opened this issue Nov 22, 2022 · 1 comment
Labels
bug report A submitted bug report, not yet validated.

Comments

@hisuwh
Copy link

hisuwh commented Nov 22, 2022

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:

  • the key initially pressed
  • the value false

Screenshots
image

Device information:

  • Device: Laptop
  • OS: Windows 11
  • Browser Chrome
  • Version 107.0.5304.107

Notes:

  • I tried reproducing this in the code sandbox but was unable to so have assumed this is only reproducible in tsx rather than more traditional SFC.
  • In my own code I have removed and added the conditional statement wrapping the component to verify this is part of the problem
  • I tried adding the keep-model-data prop to the input but this did not resolve the issue
@hisuwh hisuwh added the bug report A submitted bug report, not yet validated. label Nov 22, 2022
@hisuwh
Copy link
Author

hisuwh commented Nov 29, 2022

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug report A submitted bug report, not yet validated.
Projects
None yet
Development

No branches or pull requests

1 participant