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

Loading prop has no effect #30

Open
swfsql opened this issue Jul 29, 2022 · 0 comments
Open

Loading prop has no effect #30

swfsql opened this issue Jul 29, 2022 · 0 comments

Comments

@swfsql
Copy link

swfsql commented Jul 29, 2022

First thanks for working on this lib! I'm a newcomer trying it out.

I believe the loading prop for TextArea has no effect, as the loading spinner animation exists in a html ::after that is present when a is-loading class exists in a control wrapper element.

The following rust:

<ybc::Field
    label={".."}
    help={".."}
><ybc::Control
    tag={"div"}
    classes={classes!("")}
><ybc::TextArea
    name={"example"}
    value={""}
    update={link.callback(Msg::TextAreaUpdated)}
    placeholder={".."}
    loading=true
/></ybc::Control></ybc::Field>

Results in the following html (in which the spinner is not present) :

<div class="field">
  <label class="label">..</label>
  <div class="control">
    <textarea name="example" placeholder=".." rows="0" class="textarea is-loading"></textarea>
  </div>
  <label class="help">..</label>
</div>

Note: the .field.control.is-loading is set.


But the following rust:

<ybc::Field
    label={".."}
    help={".."}
><ybc::Control
    tag={"div"}
    classes={classes!("is-loading")}
><ybc::TextArea
    name={"example"}
    value={""}
    update={link.callback(Msg::TextAreaUpdated)}
    placeholder={".."}
/></ybc::Control></ybc::Field>

Results in the following html (in which the spinner is present) :

<div class="field">
  <label class="label">..</label>
  <div class="control is-loading">
    <textarea name="example" placeholder=".." rows="0" class="textarea"></textarea>
    ::after
  </div>
  <label class="help">..</label>
</div>

Note: The .field.control and the .field.is-loading are set.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant