Uncaught (in promise) Error: close not found

[Emt-tz]

Qwik Version

0.12.1

Operating System (or Browser)

Chrome(Mac OS Ventura)

Node Version (if applicable)

No response

Which component is affected?

Qwik Runtime

Expected Behaviour

onChange$ = { <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" onChange$={ (event) => { store.credentials.username = (event.target as HTMLInputElement).value; } } /> }

Expecting the store value to be updated

Actual Behaviour

Uncaught (in promise) Error: close not found at findClose (virtual-element.js:286:11) at Object.acceptNode (resume.js:57:35) at resumeContainer (resume.js:81:32) at resumeIfNeeded (resume.js:23:9) at useLexicalScope (use-lexical-scope.public.js:32:9) at login_component__Fragment_section_div_div_div_div_form_div_input_onChange_RCnML8gzP5A (index.tsx:65:47) at dispatch (login:106:35) at async HTMLDocument.processDocumentEvent (login:134:17)

Additional Information

if log to the console without updating the store value then it works but storing to the store it leads to that error

No response

[manucorporat]

The provided repo code is not enough for me to reproduce the issue. Could you create an small app here? https://stackblitz.com/edit/qwik-starter That reproduces the issue?

[Emt-tz]

import { component$, useStore } from '@builder.io/qwik';

export default component$(() => {
  var store = useStore({
    showLoader: false,
    credentials: { username: '', password: '' },
  });
  const LoginButton = component$(() => {
    let buttonText = 'Login';
    if (store.showLoader) {
      buttonText = 'Loading...';
    }
    return (
      <>
        <button
          type="button"
          class="main-btn"
          onClick$={async () => {
            console.log(store.credentials);
          }}
        >
          {buttonText}
        </button>
      </>
    );
  });
  return (
    <>
      <section id="contact-page" class="pt-90 pb-120 gray-bg ">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <div
                class="login-form 
                        "
              >
                <form>
                  <div
                    class="form-group
                                "
                  >
                    <label for="exampleInputEmail1">Email address</label>
                    <input
                      type="email"
                      name="email"
                      class="form-control"
                      id="exampleInputEmail1"
                      aria-describedby="emailHelp"
                      placeholder="Enter email"
                      onChange$={(event) => {
                        let value = (event.target as HTMLInputElement).value;
                        store.credentials.username = value;
                      }}
                    />
                    <small id="emailHelp" class="form-text text-muted">
                      We'll never share your email with anyone else.
                    </small>
                  </div>
                  <div
                    class="form-group
                                "
                  >
                    <label for="exampleInputPassword1">Password</label>
                    <input
                      type="password"
                      name="password"
                      class="form-control"
                      id="exampleInputPassword1"
                      placeholder="Password"
                      onChange$={(event) => {
                        let value = (event.target as HTMLInputElement).value;
                        store.credentials.password = value;
                      }}
                    />
                  </div>
                  <div
                    class="form-group
                                "
                  >
                    <div
                      class="form-check
                                    "
                    >
                      <input
                        type="checkbox"
                        class="form-check-input"
                        id="exampleCheck1"
                      />
                      <label
                        class="form-check
                                        -label"
                        for="exampleCheck1"
                      >
                        Check me out
                      </label>
                    </div>
                  </div>
                  <LoginButton />
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
});

[zanettin]

Hi @Emt-tz Tried your example code locally on latest qwik version (0.13.3) and it worked as expected. I see the updated store values in the console after clicking the button. May you give it another spin with the latest version or try to create a reproduction on stackblitz? 🙏

[manucorporat]

Same tested with 0.14.1 and works! since everything seems to point it's fixed, closing to keep things clean!