Skip to content

Drawer doesn't open if close button icon is set in presets #8195

@bjarnef

Description

@bjarnef

Describe the bug

I have the following presets for Drawer component (formerly Sidebar):
https://primevue.org/guides/migration/v4/

import type { DrawerPassThroughOptions } from "primevue/drawer";

type DefaultPrimePresetType = {
  drawer?: DrawerPassThroughOptions;
};

const DefaultPrimePreset: DefaultPrimePresetType = {
drawer: {
    root: 'p-sidebar',
    mask: 'p-sidebar-mask',
    header: 'p-sidebar__header',
    title: 'p-sidebar__title',
    content: 'p-sidebar__content',
    pcCloseButton: {
      root: 'p-sidebar__closeButton',
      //icon: 'p-sidebar__closeIcon'
    },
    transition: ({ props }) => props.position === 'top'
      ? {
        enterFromClass: 'p-sidebar-enter-from p-sidebar-enter-from-top',
        leaveToClass: 'p-sidebar-leave-to p-sidebar-leave-to-top'
      }
      : props.position === 'bottom'
        ? {
          enterFromClass: 'p-sidebar-enter-from p-sidebar-enter-from-bottom',
          leaveToClass: 'p-sidebar-leave-to p-sidebar-leave-to-bottom'
        }
        : props.position === 'left'
          ? {
            enterFromClass: 'p-sidebar-enter-from p-sidebar-enter-from-left',
            leaveToClass: 'p-sidebar-leave-to p-sidebar-leave-to-left'
          }
          : props.position === 'right'
            ? {
              enterFromClass: 'p-sidebar-enter-from p-sidebar-enter-from-right',
              leaveToClass: 'p-sidebar-leave-to p-sidebar-leave-to-right'
            }
            : {
              enterFromClass: 'p-sidebar-enter-from',
              enterActiveClass: 'p-sidebar-enter-active',
              leaveActiveClass: 'p-sidebar-leave-active',
              leaveToClass: 'p-sidebar-leave-to'
            }
  },
};

export default DefaultPrimePreset;

This works an p-sidebar__closeButton class is applied to close button in drawer/sidebar.

However if I set icon property as well, the drawer/sidebar doesn't open:

pcCloseButton: {
    root: 'p-sidebar__closeButton',
    icon: 'p-sidebar__closeIcon'
},

It seems to cause the following error in console, when I click the button to open drawer/sidebar.

Image Image Image

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

Environment

Nuxt 3.12.1
PrimeVue Nuxt Module: 4.3.5

Vue version

3.3.8

PrimeVue version

4.3.5

Node version

20.17.0

Browser(s)

Chrome 140.0.7339.208

Steps to reproduce the behavior

Expected behavior

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions