vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.75k stars 8.34k forks source link

Events on functional components not working #12407

Closed tcastelly closed 1 week ago

tcastelly commented 1 week ago

Vue version

3.5

Link to minimal reproduction

https://github.com/shenron/vite-demo/blob/issue-functional-cmp-events/src/components/BaseLink.tsx#L21

Steps to reproduce

After installed and launched the project a "Base Link" should be visible, click it.

What is expected?

a console.log('click') should be visible in the console.

const BaseLink = (p: Props, context: FunctionalContext) => h(
  'a',
  {
    ...context.attrs,
    href: p?.href || '#',
    title: p?.title || '',
    onClick: (e: MouseEvent) => () => console.log('click', e), // <-- `onClick` event not catch
    class: [
      context.attrs?.class,
    ],
  },
  context.slots,
);

What is actually happening?

The click event is not catch

System Info


  System:
    OS: Linux 6.6 Arch Linux
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 14.67 GB / 31.26 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Chromium: 131.0.6778.69
  npmPackages:
    vue: ^3.5.12 => 3.5.12 

Any additional comments?

Because of eslint version conflict, install the project using:

npm ci --force

skirtles-code commented 1 week ago

I think this:

onClick: (e: MouseEvent) => () => console.log('click', e),

should be this:

onClick: (e: MouseEvent) => console.log('click', e),

Not clear to me what the purpose of that extra function is.

tcastelly commented 1 week ago

I think this:

onClick: (e: MouseEvent) => () => console.log('click', e),

should be this:

onClick: (e: MouseEvent) => console.log('click', e),

Not clear to me what the purpose of that extra function is.

You are absolutely right, I made a typo :(

Sorry, and thank you.