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

[🐞] Named Slot not projected inside a child component #3602

Open
GrandSchtroumpf opened this issue Mar 31, 2023 · 2 comments
Open

[🐞] Named Slot not projected inside a child component #3602

GrandSchtroumpf opened this issue Mar 31, 2023 · 2 comments
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working

Comments

@GrandSchtroumpf
Copy link
Contributor

Which component is affected?

Qwik Runtime

Describe the bug

I'm building a form field component with named Slot to put specific content at a specific place, but named Slot are not projected through child component:

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

const FormField = component$(() => {
  return (
    <div class="field">
      <Slot name="label" />
      <div class="input-container">
        <Slot name="prefix" />
        <Slot />
        <Slot name="suffix" />
      </div>
    </div>
  );
});

export const Suffix = component$(() => <p q:slot="suffix" class="suffix"><Slot /></p>);

export default component$(() => {
  return (
    <FormField>
      <Suffix>Suffix</Suffix>   //  <-- This should be displayed after the input
      <input type="text" placeholder="Text" />
      <label q:slot="label">Label</label>  // <-- This one will be placed before the input as expected
    </FormField>
  );
});

If it's not a bug, I think this would be a very convenient feature for managing logic in a context, for example :

export const FormField = component$(() => {
  const state = useStore({ errors: {} });
  useContextProvider(FormFieldContext, state);
  return <div class="field">
    <div class="input-container">
      <Slot />
    </div>
    <Slot name="error"/>
    <Slot name="hint"/>
  </div>;
});
export const FormError = component$(({ name }: FormErrorProps) => {
  const fieldState = useContext(FormFieldContext);
  if (name in fieldState.errors) return <span q:name="error" class="error"><Slot/></span>
})
export const FormHint = component$(({ name }: FormErrorProps) => {
  const fieldState = useContext(FormFieldContext);
  if (name in fieldState.errors) return;
  return <span q:name="hint" class="hint"><Slot/></span>
})

Here I can position the children where I want and I can apply some logic thanks to the context.

Reproduction

https://stackblitz.com/edit/qwik-starter-bu23cy?file=src/routes/index.tsx

Steps to reproduce

No response

System Info

System:
    OS: Windows 10 10.0.22623
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 18.70 GB / 31.71 GB
  Binaries:
    Node: 16.19.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.3.1 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1095.0), Chromium (111.0.1661.54)
    Internet Explorer: 11.0.22621.1

Additional Information

No response

@GrandSchtroumpf GrandSchtroumpf added TYPE: bug Something isn't working STATUS-1: needs triage New issue which needs to be triaged labels Mar 31, 2023
@stackblitz
Copy link

stackblitz bot commented Mar 31, 2023

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@shairez
Copy link
Contributor

shairez commented Apr 30, 2023

related to QwikDev/qwik-evolution#97

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants