diff --git a/oxlint-suppressions.json b/oxlint-suppressions.json
index b52ee31d98e..d459c3fafe7 100644
--- a/oxlint-suppressions.json
+++ b/oxlint-suppressions.json
@@ -1067,14 +1067,6 @@
       "count": 2
     }
   },
-  "web/app/components/base/date-and-time-picker/time-picker/__tests__/index.spec.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/base/date-and-time-picker/time-picker/index.tsx": {
     "jsx_a11y/click-events-have-key-events": {
       "count": 1
@@ -3342,14 +3334,6 @@
       "count": 2
     }
   },
-  "web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx": {
-    "jsx_a11y/click-events-have-key-events": {
-      "count": 1
-    },
-    "jsx_a11y/no-static-element-interactions": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
diff --git a/web/__mocks__/base-ui-dropdown-menu.tsx b/web/__mocks__/base-ui-dropdown-menu.tsx
index 90ff259754a..d3b439f0dfc 100644
--- a/web/__mocks__/base-ui-dropdown-menu.tsx
+++ b/web/__mocks__/base-ui-dropdown-menu.tsx
@@ -12,10 +12,19 @@ type DropdownMenuProps = {
   onOpenChange?: (open: boolean) => void
 }
 
-type DropdownMenuTriggerProps = React.HTMLAttributes<HTMLElement> & {
+type TriggerHtmlProps = React.HTMLAttributes<HTMLElement> & {
+  'data-testid'?: string
+  'data-disabled'?: string
+  'data-popup-open'?: string
+}
+
+type DropdownMenuTriggerProps = TriggerHtmlProps & {
   children?: ReactNode
+  disabled?: boolean
   nativeButton?: boolean
-  render?: React.ReactElement
+  render?:
+    | React.ReactElement
+    | ((props: TriggerHtmlProps, state: { open: boolean }) => React.ReactElement)
 }
 
 type DropdownMenuContentProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -51,16 +60,33 @@ export const DropdownMenuTrigger = ({
   render,
   nativeButton: _nativeButton,
   onClick,
+  disabled,
   ...props
 }: DropdownMenuTriggerProps) => {
   const { open, onOpenChange } = React.useContext(DropdownMenuContext)
-  const node = render ?? children
-  const isNativeButton = React.isValidElement(node) && node.type === 'button'
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (disabled) return
     onClick?.(event)
     if (!event.defaultPrevented) onOpenChange(!open)
   }
 
+  if (typeof render === 'function') {
+    return render(
+      {
+        ...props,
+        'aria-disabled': disabled || undefined,
+        'data-testid': props['data-testid'] ?? 'dropdown-menu-trigger',
+        'data-disabled': disabled ? '' : undefined,
+        'data-popup-open': open ? '' : undefined,
+        onClick: handleClick,
+      },
+      { open },
+    )
+  }
+
+  const node = render ?? children
+  const isNativeButton = React.isValidElement(node) && node.type === 'button'
+
   if (React.isValidElement(node)) {
     const triggerElement = node as React.ReactElement<Record<string, unknown>>
     const childProps = (triggerElement.props ?? {}) as React.HTMLAttributes<HTMLElement> & {
@@ -80,6 +106,10 @@ export const DropdownMenuTrigger = ({
         ...childProps,
         'data-testid':
           childProps['data-testid'] ?? triggerProps['data-testid'] ?? 'dropdown-menu-trigger',
+        'data-disabled': disabled ? '' : undefined,
+        'data-popup-open': open ? '' : undefined,
+        disabled: isNativeButton ? disabled : undefined,
+        'aria-disabled': !isNativeButton && disabled ? true : childProps['aria-disabled'],
         role,
         tabIndex:
           childProps.tabIndex ?? triggerProps.tabIndex ?? (role === 'button' ? 0 : undefined),
diff --git a/web/__mocks__/base-ui-popover.tsx b/web/__mocks__/base-ui-popover.tsx
index 3c393ebd0b8..65324a56733 100644
--- a/web/__mocks__/base-ui-popover.tsx
+++ b/web/__mocks__/base-ui-popover.tsx
@@ -12,10 +12,18 @@ type PopoverProps = {
   onOpenChange?: (open: boolean) => void
 }
 
-type PopoverTriggerProps = React.HTMLAttributes<HTMLElement> & {
+type TriggerHtmlProps = React.HTMLAttributes<HTMLElement> & {
+  'data-testid'?: string
+  'data-popover-trigger'?: string
+  'data-popup-open'?: string
+}
+
+type PopoverTriggerProps = TriggerHtmlProps & {
   children?: ReactNode
   nativeButton?: boolean
-  render?: React.ReactElement
+  render?:
+    | React.ReactElement
+    | ((props: TriggerHtmlProps, state: { open: boolean }) => React.ReactElement)
 }
 
 type PopoverContentProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -84,6 +92,21 @@ export const PopoverTrigger = ({
   ...props
 }: PopoverTriggerProps) => {
   const { open, onOpenChange } = React.useContext(PopoverContext)
+  if (typeof render === 'function') {
+    const triggerProps: TriggerHtmlProps = {
+      ...props,
+      'data-testid': props['data-testid'] ?? 'popover-trigger',
+      'data-popover-trigger': 'true',
+      'data-popup-open': open ? '' : undefined,
+      onClick: (event: React.MouseEvent<HTMLElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        onOpenChange(!open)
+      },
+    }
+    return render(triggerProps, { open })
+  }
+
   const node = render ?? children
 
   if (React.isValidElement(node)) {
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
index 4cfc061c273..e438634162f 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
@@ -1,7 +1,10 @@
 'use client'
 import type { Dayjs } from 'dayjs'
 import type { FC } from 'react'
-import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
+import type {
+  DatePickerProps,
+  TriggerProps,
+} from '@/app/components/base/date-and-time-picker/types'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiCalendarLine } from '@remixicon/react'
 import dayjs from 'dayjs'
@@ -23,15 +26,19 @@ const today = dayjs()
 const DatePicker: FC<Props> = ({ start, end, onStartChange, onEndChange }) => {
   const locale = useLocale()
 
-  const renderDate = useCallback(
-    ({ value, handleClickTrigger, isOpen }: TriggerProps) => {
+  const renderDate = useCallback<NonNullable<DatePickerProps['renderTrigger']>>(
+    (props, _state, { value, handleClickTrigger }: TriggerProps) => {
       return (
         <div
+          {...props}
           className={cn(
-            'flex h-7 cursor-pointer items-center rounded-lg px-1 system-sm-regular text-components-input-text-filled hover:bg-state-base-hover',
-            isOpen && 'bg-state-base-hover',
+            'flex h-7 cursor-pointer items-center rounded-lg px-1 system-sm-regular text-components-input-text-filled hover:bg-state-base-hover data-popup-open:bg-state-base-hover',
+            props.className,
           )}
-          onClick={handleClickTrigger}
+          onClick={(event) => {
+            handleClickTrigger(event)
+            props.onClick?.(event)
+          }}
         >
           {value ? formatToLocalTime(value, locale, 'MMM D') : ''}
         </div>
diff --git a/web/app/components/app-sidebar/snippet-info/dropdown.tsx b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
index 27289b7c14f..c5c0a1a0782 100644
--- a/web/app/components/app-sidebar/snippet-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
@@ -10,7 +10,6 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
-import { cn } from '@langgenius/dify-ui/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -127,12 +126,7 @@ const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
   return (
     <>
       <DropdownMenu open={open} onOpenChange={setOpen}>
-        <DropdownMenuTrigger
-          className={cn(
-            'action-btn action-btn-m size-6 rounded-md text-text-tertiary',
-            open && 'bg-state-base-hover text-text-secondary',
-          )}
-        >
+        <DropdownMenuTrigger className="action-btn action-btn-m size-6 rounded-md text-text-tertiary data-popup-open:bg-state-base-hover data-popup-open:text-text-secondary">
           <span aria-hidden className="i-ri-more-fill size-4" />
         </DropdownMenuTrigger>
         <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="w-[180px] p-1">
diff --git a/web/app/components/app/app-access-control/__tests__/access-control-item.spec.tsx b/web/app/components/app/app-access-control/__tests__/access-control-item.spec.tsx
index 2bd51a9a2d2..c28207801ef 100644
--- a/web/app/components/app/app-access-control/__tests__/access-control-item.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/access-control-item.spec.tsx
@@ -61,7 +61,7 @@ describe('AccessControlItem', () => {
 
     const organization = screen.getByRole('radio', { name: 'Organization Only' })
     expect(organization).toHaveAttribute('aria-disabled', 'true')
-    expect(organization).toHaveClass('cursor-not-allowed')
+    expect(organization).toHaveAttribute('data-disabled')
 
     await user.click(organization)
 
diff --git a/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx b/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
index 3e557b5f958..7a44ec44fbe 100644
--- a/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
+++ b/web/app/components/app/app-access-control/__tests__/access-control.spec.tsx
@@ -283,12 +283,18 @@ describe('AddMemberOrGroupDialog', () => {
     expect(document.querySelector('.spin-animation')).toBeInTheDocument()
 
     const groupOption = screen.getByRole('option', { name: /Group One/ })
+    expect(groupOption).not.toHaveAttribute('data-selected')
     fireEvent.click(groupOption)
+    expect(groupOption).toHaveAttribute('data-selected')
     fireEvent.click(groupOption)
+    expect(groupOption).not.toHaveAttribute('data-selected')
 
     const memberOption = screen.getByRole('option', { name: /Member One/ })
+    expect(memberOption).not.toHaveAttribute('data-selected')
     fireEvent.click(memberOption)
+    expect(memberOption).toHaveAttribute('data-selected')
     fireEvent.click(memberOption)
+    expect(memberOption).not.toHaveAttribute('data-selected')
 
     fireEvent.click(screen.getByText('app.accessControlDialog.operateGroupAndMember.expand'))
     fireEvent.click(screen.getByText('app.accessControlDialog.operateGroupAndMember.allMembers'))
diff --git a/web/app/components/app/app-access-control/access-control-item.tsx b/web/app/components/app/app-access-control/access-control-item.tsx
index f4f5d3bb03c..358ce8bbd35 100644
--- a/web/app/components/app/app-access-control/access-control-item.tsx
+++ b/web/app/components/app/app-access-control/access-control-item.tsx
@@ -19,9 +19,7 @@ export default function AccessControlItem({ type, children, disabled }: AccessCo
         'rounded-[10px] border-[0.5px] border-components-option-card-option-border bg-components-option-card-option-bg shadow-xs transition-colors',
         'focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
         'data-checked:border-components-option-card-option-selected-border data-checked:bg-components-option-card-option-selected-bg data-checked:inset-ring-[0.5px] data-checked:inset-ring-components-option-card-option-selected-border',
-        disabled
-          ? 'cursor-not-allowed opacity-60'
-          : 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover',
+        'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:hover:border-components-option-card-option-border data-disabled:hover:bg-components-option-card-option-bg',
       )}
     >
       {children}
diff --git a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
index fe229000335..cc2afcca131 100644
--- a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
+++ b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
@@ -297,19 +297,23 @@ function GroupItem({ group, subject }: GroupItemProps) {
   return (
     <div className="flex items-center gap-2 rounded-lg hover:bg-state-base-hover">
       <BaseItem subject={subject}>
-        <SelectionBox checked={isChecked} />
-        <ComboboxItemText className="flex grow items-center px-0">
-          <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-            <div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
-              <RiOrganizationChart
-                className="h-3.5 w-3.5 text-components-avatar-shape-fill-stop-0"
-                aria-hidden="true"
-              />
-            </div>
-          </div>
-          <span className="mr-1 system-sm-medium text-text-secondary">{group.name}</span>
-          <span className="system-xs-regular text-text-tertiary">{group.groupSize}</span>
-        </ComboboxItemText>
+        {(selected) => (
+          <>
+            <SelectionBox checked={selected} />
+            <ComboboxItemText className="flex grow items-center px-0">
+              <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+                <div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
+                  <RiOrganizationChart
+                    className="h-3.5 w-3.5 text-components-avatar-shape-fill-stop-0"
+                    aria-hidden="true"
+                  />
+                </div>
+              </div>
+              <span className="mr-1 system-sm-medium text-text-secondary">{group.name}</span>
+              <span className="system-xs-regular text-text-tertiary">{group.groupSize}</span>
+            </ComboboxItemText>
+          </>
+        )}
       </BaseItem>
       <Button
         size="small"
@@ -335,25 +339,27 @@ type MemberItemProps = {
 function MemberItem({ member, subject }: MemberItemProps) {
   const currentUser = useAtomValue(userProfileAtom)
   const { t } = useTranslation()
-  const specificMembers = useAccessControlStore((s) => s.specificMembers)
-  const isChecked = specificMembers.some((m) => m.id === member.id)
   return (
     <BaseItem subject={subject} className="pr-3">
-      <SelectionBox checked={isChecked} />
-      <ComboboxItemText className="flex grow items-center px-0">
-        <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-          <div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
-            <Avatar size="xxs" avatar={null} name={member.name} />
-          </div>
-        </div>
-        <span className="mr-1 system-sm-medium text-text-secondary">{member.name}</span>
-        {currentUser.email === member.email && (
-          <span className="system-xs-regular text-text-tertiary">
-            ({t(($) => $.you, { ns: 'common' })})
-          </span>
-        )}
-      </ComboboxItemText>
-      <span className="system-xs-regular text-text-quaternary">{member.email}</span>
+      {(selected) => (
+        <>
+          <SelectionBox checked={selected} />
+          <ComboboxItemText className="flex grow items-center px-0">
+            <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+              <div className="bg-access-app-icon-mask-bg flex size-full items-center justify-center">
+                <Avatar size="xxs" avatar={null} name={member.name} />
+              </div>
+            </div>
+            <span className="mr-1 system-sm-medium text-text-secondary">{member.name}</span>
+            {currentUser.email === member.email && (
+              <span className="system-xs-regular text-text-tertiary">
+                ({t(($) => $.you, { ns: 'common' })})
+              </span>
+            )}
+          </ComboboxItemText>
+          <span className="system-xs-regular text-text-quaternary">{member.email}</span>
+        </>
+      )}
     </BaseItem>
   )
 }
@@ -361,7 +367,7 @@ function MemberItem({ member, subject }: MemberItemProps) {
 type BaseItemProps = {
   className?: string
   subject: Subject
-  children: React.ReactNode
+  children: (selected: boolean) => React.ReactNode
 }
 function BaseItem({ children, className, subject }: BaseItemProps) {
   return (
@@ -371,9 +377,12 @@ function BaseItem({ children, className, subject }: BaseItemProps) {
         'mx-0 flex min-h-8 grow grid-cols-none items-center gap-2 rounded-lg p-1 pl-2',
         className,
       )}
-    >
-      {children}
-    </ComboboxItem>
+      render={(props, state) => (
+        <div {...props} className={props.className}>
+          {children(state.selected)}
+        </div>
+      )}
+    />
   )
 }
 
diff --git a/web/app/components/app/configuration/config/automatic/version-selector.tsx b/web/app/components/app/configuration/config/automatic/version-selector.tsx
index f1aab5613fa..41201767eb5 100644
--- a/web/app/components/app/configuration/config/automatic/version-selector.tsx
+++ b/web/app/components/app/configuration/config/automatic/version-selector.tsx
@@ -1,4 +1,3 @@
-import { cn } from '@langgenius/dify-ui/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -30,12 +29,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
     <DropdownMenu>
       <DropdownMenuTrigger
         disabled={!moreThanOneVersion}
-        className={cn(
-          'flex items-center border-none bg-transparent p-0 system-xs-medium text-text-tertiary',
-          moreThanOneVersion
-            ? 'cursor-pointer data-popup-open:text-text-secondary'
-            : 'cursor-default',
-        )}
+        className="flex cursor-pointer items-center border-none bg-transparent p-0 system-xs-medium text-text-tertiary data-disabled:cursor-default data-popup-open:text-text-secondary"
       >
         <div>
           {t(($) => $['generate.version'], { ns: 'appDebug' })} {value + 1}
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index e9a88389cde..0900894bd18 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -651,8 +651,7 @@ export function AppCardActionBar({ app, onRefresh }: AppCardActionBarProps) {
                 }
                 disabled={isExporting}
                 className={cn(
-                  'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden disabled:cursor-not-allowed',
-                  isOperationsMenuOpen ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
+                  'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden disabled:cursor-not-allowed data-popup-open:bg-state-base-hover',
                 )}
                 onClick={(e) => {
                   e.stopPropagation()
@@ -1291,10 +1290,7 @@ export function AppCard({
                         })
                   }
                   disabled={isExporting}
-                  className={cn(
-                    'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden disabled:cursor-not-allowed',
-                    isOperationsMenuOpen ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
-                  )}
+                  className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden disabled:cursor-not-allowed data-popup-open:bg-state-base-hover"
                   onClick={(e) => {
                     e.stopPropagation()
                     e.preventDefault()
diff --git a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
index 6fbc4f8103d..6330fe50eba 100644
--- a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
@@ -29,15 +29,16 @@ const MobileOperationDropdown = ({
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger
-        render={
+        render={(props, state) => (
           <ActionButton
+            {...props}
             aria-label={t(($) => $['operation.more'], { ns: 'common' })}
             size="l"
-            state={open ? ActionButtonState.Hover : ActionButtonState.Default}
+            state={state.open ? ActionButtonState.Hover : ActionButtonState.Default}
           >
             <div className="i-ri-more-fill h-4.5 w-4.5" aria-hidden="true" />
           </ActionButton>
-        }
+        )}
       />
       <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="min-w-[160px]">
         <DropdownMenuItem
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
index 3cc0df4e175..3763be293d4 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
@@ -1,6 +1,5 @@
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { RiChatSettingsLine } from '@remixicon/react'
-import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
@@ -8,16 +7,18 @@ import { Message3Fill } from '@/app/components/base/icons/src/public/other'
 
 const ViewFormDropdown = () => {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover>
       <PopoverTrigger
-        render={
-          <ActionButton size="l" state={open ? ActionButtonState.Hover : ActionButtonState.Default}>
+        render={(props, state) => (
+          <ActionButton
+            {...props}
+            size="l"
+            state={state.open ? ActionButtonState.Hover : ActionButtonState.Default}
+          >
             <RiChatSettingsLine className="h-4.5 w-4.5" />
           </ActionButton>
-        }
+        )}
       />
       <PopoverContent
         placement="bottom-end"
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
index 710f6b2e069..e144c2d8946 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
@@ -48,24 +48,26 @@ const Operation: FC<Props> = ({
   return (
     <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger
-        render={
+        render={(props, state) => (
           <ActionButton
+            {...props}
             className={cn(
-              isItemHovering || open
+              isItemHovering || state.open
                 ? 'pointer-events-auto opacity-100'
                 : 'pointer-events-none opacity-0',
+              props.className,
             )}
             state={
               isActive
                 ? ActionButtonState.Active
-                : open
+                : state.open
                   ? ActionButtonState.Hover
                   : ActionButtonState.Default
             }
           >
             <span aria-hidden className="i-ri-more-fill size-4" />
           </ActionButton>
-        }
+        )}
         onClick={(e) => e.stopPropagation()}
       />
       <DropdownMenuContent
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
index 78eb10c21df..cf43eacd3bf 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
@@ -1,7 +1,6 @@
 import { cn } from '@langgenius/dify-ui/cn'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import * as React from 'react'
-import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
@@ -12,20 +11,19 @@ type Props = Readonly<{
 
 const ViewFormDropdown = ({ iconColor }: Props) => {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover>
       <PopoverTrigger
-        render={
+        render={(props, state) => (
           <ActionButton
+            {...props}
             size="l"
-            state={open ? ActionButtonState.Hover : ActionButtonState.Default}
+            state={state.open ? ActionButtonState.Hover : ActionButtonState.Default}
             data-testid="view-form-dropdown-trigger"
           >
             <div className={cn('i-ri-chat-settings-line h-4.5 w-4.5 shrink-0', iconColor)} />
           </ActionButton>
-        }
+        )}
       />
       <PopoverContent
         placement="bottom-end"
diff --git a/web/app/components/base/date-and-time-picker/date-picker/__tests__/index.spec.tsx b/web/app/components/base/date-and-time-picker/date-picker/__tests__/index.spec.tsx
index 6b079a8c78b..0a530b716b1 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/__tests__/index.spec.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/__tests__/index.spec.tsx
@@ -400,8 +400,16 @@ describe('DatePicker', () => {
   describe('Clear Behavior', () => {
     it('should call onClear when clear is clicked while picker is closed', () => {
       const onClear = vi.fn()
-      const renderTrigger = vi.fn(({ handleClear }) => (
-        <button data-testid="clear-trigger" onClick={handleClear}>
+      const renderTrigger = vi.fn((triggerProps, _state, { handleClear }) => (
+        <button
+          {...triggerProps}
+          data-testid="clear-trigger"
+          onClick={(event) => {
+            event.preventDefault()
+            handleClear(event)
+            triggerProps.onClick?.(event)
+          }}
+        >
           Clear
         </button>
       ))
@@ -420,8 +428,8 @@ describe('DatePicker', () => {
     it('should clear selected date without calling onClear when picker is open', () => {
       const onClear = vi.fn()
       const onChange = vi.fn()
-      const renderTrigger = vi.fn(({ handleClickTrigger, handleClear }) => (
-        <div>
+      const renderTrigger = vi.fn((triggerProps, _state, { handleClickTrigger, handleClear }) => (
+        <div {...triggerProps}>
           <button data-testid="open-trigger" onClick={handleClickTrigger}>
             Open
           </button>
@@ -576,8 +584,8 @@ describe('DatePicker', () => {
   // Custom trigger
   describe('Custom Trigger', () => {
     it('should use renderTrigger when provided', () => {
-      const renderTrigger = vi.fn(({ handleClickTrigger }) => (
-        <button data-testid="custom-trigger" onClick={handleClickTrigger}>
+      const renderTrigger = vi.fn((triggerProps, _state, { handleClickTrigger }) => (
+        <button {...triggerProps} data-testid="custom-trigger" onClick={handleClickTrigger}>
           Custom
         </button>
       ))
@@ -589,8 +597,8 @@ describe('DatePicker', () => {
     })
 
     it('should open picker when custom trigger is clicked', () => {
-      const renderTrigger = vi.fn(({ handleClickTrigger }) => (
-        <button data-testid="custom-trigger" onClick={handleClickTrigger}>
+      const renderTrigger = vi.fn((triggerProps, _state, { handleClickTrigger }) => (
+        <button {...triggerProps} data-testid="custom-trigger" onClick={handleClickTrigger}>
           Custom
         </button>
       ))
@@ -602,6 +610,24 @@ describe('DatePicker', () => {
 
       expect(screen.getAllByText(/daysInWeek/).length).toBeGreaterThan(0)
     })
+
+    it('should expose Base UI trigger state and props to a custom trigger', () => {
+      const renderTrigger = vi.fn((triggerProps, state) => (
+        <button {...triggerProps} data-testid="state-trigger">
+          {state.open ? 'Open' : 'Closed'}
+        </button>
+      ))
+
+      render(<DatePicker {...createDatePickerProps({ renderTrigger })} />)
+
+      expect(screen.getByTestId('state-trigger')).toHaveTextContent('Closed')
+      expect(screen.getByTestId('state-trigger')).not.toHaveAttribute('data-popup-open')
+
+      fireEvent.click(screen.getByTestId('state-trigger'))
+
+      expect(screen.getByTestId('state-trigger')).toHaveTextContent('Open')
+      expect(screen.getByTestId('state-trigger')).toHaveAttribute('data-popup-open')
+    })
   })
 
   // Disabled dates
diff --git a/web/app/components/base/date-and-time-picker/date-picker/index.tsx b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
index f70ab90fb3b..0eeb609dd7a 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
@@ -223,42 +223,50 @@ const DatePicker = ({
     : t(($) => $['dateFormats.display'], { ns: 'time' })
   const displayValue = normalizedValue?.format(timeFormat) || ''
   const displayTime = selectedDate?.format('hh:mm A') || '--:-- --'
-  const placeholderDate =
-    isOpen && selectedDate
-      ? selectedDate.format(timeFormat)
-      : placeholder || t(($) => $.defaultPlaceholder, { ns: 'time' })
-
   return (
     <Popover open={isOpen} onOpenChange={handleOpenChange}>
       <PopoverTrigger
         nativeButton={false}
         className={triggerWrapClassName}
-        render={
-          renderTrigger ? (
-            renderTrigger({
+        render={(props, state) => {
+          if (renderTrigger) {
+            return renderTrigger(props, state, {
               value: normalizedValue,
               selectedDate,
-              isOpen,
               handleClear,
               handleClickTrigger,
             })
-          ) : (
+          }
+
+          const placeholderDate =
+            state.open && selectedDate
+              ? selectedDate.format(timeFormat)
+              : placeholder || t(($) => $.defaultPlaceholder, { ns: 'time' })
+
+          return (
             <div
-              className="group flex w-63 cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt"
-              onClick={handleClickTrigger}
+              {...props}
+              className={cn(
+                'group flex w-63 cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt',
+                props.className,
+              )}
+              onClick={(event) => {
+                handleClickTrigger(event)
+                props.onClick?.(event)
+              }}
               data-testid="date-picker-trigger"
             >
               <input
                 className="flex-1 cursor-pointer appearance-none truncate bg-transparent p-1 system-xs-regular text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder"
                 readOnly
-                value={isOpen ? '' : displayValue}
+                value={state.open ? '' : displayValue}
                 placeholder={placeholderDate}
               />
               <span
                 className={cn(
                   'i-ri-calendar-line size-4 shrink-0 text-text-quaternary',
-                  isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
-                  (displayValue || (isOpen && selectedDate)) && 'group-hover:hidden',
+                  state.open ? 'text-text-secondary' : 'group-hover:text-text-secondary',
+                  (displayValue || (state.open && selectedDate)) && 'group-hover:hidden',
                 )}
               />
               <button
@@ -266,7 +274,7 @@ const DatePicker = ({
                 aria-label={t(($) => $['operation.clear'], { ns: 'common' })}
                 className={cn(
                   'hidden size-4 shrink-0 border-none bg-transparent p-0 text-text-quaternary hover:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
-                  (displayValue || (isOpen && selectedDate)) && 'group-hover:inline-block',
+                  (displayValue || (state.open && selectedDate)) && 'group-hover:inline-block',
                 )}
                 onClick={handleClear}
               >
@@ -274,7 +282,7 @@ const DatePicker = ({
               </button>
             </div>
           )
-        }
+        }}
       />
       <PopoverContent
         placement="bottom-end"
diff --git a/web/app/components/base/date-and-time-picker/time-picker/__tests__/index.spec.tsx b/web/app/components/base/date-and-time-picker/time-picker/__tests__/index.spec.tsx
index 3dc988be700..17c9cdfce21 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/__tests__/index.spec.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/__tests__/index.spec.tsx
@@ -212,8 +212,8 @@ describe('TimePicker', () => {
     })
 
     it('should use renderTrigger when provided', () => {
-      const renderTrigger = vi.fn(({ inputElem, onClick }) => (
-        <div data-testid="custom-trigger" onClick={onClick}>
+      const renderTrigger = vi.fn((triggerProps, _state, { inputElem }) => (
+        <div {...triggerProps} data-testid="custom-trigger">
           {inputElem}
         </div>
       ))
@@ -224,6 +224,25 @@ describe('TimePicker', () => {
       expect(renderTrigger).toHaveBeenCalled()
     })
 
+    it('should expose Base UI trigger state and props to a custom trigger', () => {
+      const renderTrigger = vi.fn((triggerProps, state, { inputElem }) => (
+        <button {...triggerProps} data-testid="state-trigger">
+          {state.open ? 'Open' : 'Closed'}
+          {inputElem}
+        </button>
+      ))
+
+      render(<TimePicker {...baseProps} renderTrigger={renderTrigger} />)
+
+      expect(screen.getByTestId('state-trigger')).toHaveTextContent('Closed')
+      expect(screen.getByTestId('state-trigger')).not.toHaveAttribute('data-popup-open')
+
+      fireEvent.click(screen.getByTestId('state-trigger'))
+
+      expect(screen.getByTestId('state-trigger')).toHaveTextContent('Open')
+      expect(screen.getByTestId('state-trigger')).toHaveAttribute('data-popup-open')
+    })
+
     it('should render with notClearable prop without errors', () => {
       render(<TimePicker {...baseProps} notClearable={true} value="10:00 AM" timezone="UTC" />)
 
diff --git a/web/app/components/base/date-and-time-picker/time-picker/index.tsx b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
index 7587e08d78e..7b3cc9fe8be 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
@@ -194,39 +194,43 @@ const TimePicker = ({
   )
 
   const displayValue = formatTimeValue(value)
+  const renderInput = (open: boolean) => {
+    const placeholderDate =
+      open && isDayjsObject(selectedTime)
+        ? selectedTime.format(timeFormat)
+        : placeholder || t(($) => $.defaultPlaceholder, { ns: 'time' })
 
-  const placeholderDate =
-    isOpen && isDayjsObject(selectedTime)
-      ? selectedTime.format(timeFormat)
-      : placeholder || t(($) => $.defaultPlaceholder, { ns: 'time' })
-
-  const inputElem = (
-    <input
-      className="flex-1 cursor-pointer appearance-none truncate bg-transparent p-1 system-xs-regular text-components-input-text-filled outline-hidden select-none placeholder:text-components-input-text-placeholder"
-      readOnly
-      value={isOpen ? '' : displayValue}
-      placeholder={placeholderDate}
-    />
-  )
+    return (
+      <input
+        className="flex-1 cursor-pointer appearance-none truncate bg-transparent p-1 system-xs-regular text-components-input-text-filled outline-hidden select-none placeholder:text-components-input-text-placeholder"
+        readOnly
+        value={open ? '' : displayValue}
+        placeholder={placeholderDate}
+      />
+    )
+  }
   return (
     <Popover open={isOpen} onOpenChange={handleOpenChange}>
       <PopoverTrigger
         nativeButton={false}
         className={triggerFullWidth ? 'flex! w-full' : undefined}
-        render={
-          renderTrigger ? (
-            renderTrigger({
-              inputElem,
-              onClick: handleClickTrigger,
-              isOpen,
-            })
-          ) : (
+        render={(props, state) => {
+          const inputElem = renderInput(state.open)
+          if (renderTrigger)
+            return renderTrigger(props, state, { inputElem, onClick: handleClickTrigger })
+
+          return (
             <div
+              {...props}
               className={cn(
                 'group flex cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt',
                 triggerFullWidth ? 'w-full min-w-0' : 'w-63',
+                props.className,
               )}
-              onClick={handleClickTrigger}
+              onClick={(event) => {
+                handleClickTrigger(event)
+                props.onClick?.(event)
+              }}
               data-testid="time-picker-trigger"
             >
               {inputElem}
@@ -240,8 +244,8 @@ const TimePicker = ({
               <span
                 className={cn(
                   'i-ri-time-line size-4 shrink-0 text-text-quaternary',
-                  isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
-                  (displayValue || (isOpen && selectedTime)) &&
+                  state.open ? 'text-text-secondary' : 'group-hover:text-text-secondary',
+                  (displayValue || (state.open && selectedTime)) &&
                     !notClearable &&
                     'group-hover:hidden',
                 )}
@@ -250,7 +254,7 @@ const TimePicker = ({
                 type="button"
                 className={cn(
                   'hidden size-4 shrink-0 border-none bg-transparent p-0 text-text-quaternary hover:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
-                  (displayValue || (isOpen && selectedTime)) &&
+                  (displayValue || (state.open && selectedTime)) &&
                     !notClearable &&
                     'group-hover:inline-block',
                 )}
@@ -261,7 +265,7 @@ const TimePicker = ({
               </button>
             </div>
           )
-        }
+        }}
       />
       <PopoverContent
         placement={placement}
diff --git a/web/app/components/base/date-and-time-picker/types.ts b/web/app/components/base/date-and-time-picker/types.ts
index 8d27f03ad12..91f78fcbd90 100644
--- a/web/app/components/base/date-and-time-picker/types.ts
+++ b/web/app/components/base/date-and-time-picker/types.ts
@@ -1,4 +1,4 @@
-import type { Placement } from '@langgenius/dify-ui/popover'
+import type { Placement, PopoverTriggerProps } from '@langgenius/dify-ui/popover'
 import type { Dayjs } from 'dayjs'
 
 export enum ViewType {
@@ -12,10 +12,13 @@ export enum Period {
   PM = 'PM',
 }
 
+type PopoverTriggerRender = Exclude<NonNullable<PopoverTriggerProps['render']>, React.ReactElement>
+type TriggerRenderProps = Parameters<PopoverTriggerRender>[0]
+type TriggerState = Parameters<PopoverTriggerRender>[1]
+
 export type TriggerProps = {
   value: Dayjs | undefined
   selectedDate: Dayjs | undefined
-  isOpen: boolean
   handleClear: (e: React.MouseEvent) => void
   handleClickTrigger: (e: React.MouseEvent) => void
 }
@@ -28,7 +31,11 @@ export type DatePickerProps = {
   onChange: (date: Dayjs | undefined) => void
   onClear: () => void
   triggerWrapClassName?: string
-  renderTrigger?: (props: TriggerProps) => React.ReactElement
+  renderTrigger?: (
+    props: TriggerRenderProps,
+    state: TriggerState,
+    params: TriggerProps,
+  ) => React.ReactElement
   minuteFilter?: (minutes: string[]) => string[]
   noConfirm?: boolean
   getIsDateDisabled?: (date: Dayjs) => boolean
@@ -51,7 +58,6 @@ export type DatePickerFooterProps = {
 }
 
 export type TriggerParams = {
-  isOpen: boolean
   inputElem: React.ReactNode
   onClick: (e: React.MouseEvent) => void
 }
@@ -61,7 +67,11 @@ export type TimePickerProps = {
   placeholder?: string
   onChange: (date: Dayjs | undefined) => void
   onClear: () => void
-  renderTrigger?: (props: TriggerParams) => React.ReactElement
+  renderTrigger?: (
+    props: TriggerRenderProps,
+    state: TriggerState,
+    params: TriggerParams,
+  ) => React.ReactElement
   title?: string
   minuteFilter?: (minutes: string[]) => string[]
   popupClassName?: string
diff --git a/web/app/components/base/features/new-feature-panel/__tests__/follow-up-setting-modal.spec.tsx b/web/app/components/base/features/new-feature-panel/__tests__/follow-up-setting-modal.spec.tsx
index 99268826c01..9eadafb3198 100644
--- a/web/app/components/base/features/new-feature-panel/__tests__/follow-up-setting-modal.spec.tsx
+++ b/web/app/components/base/features/new-feature-panel/__tests__/follow-up-setting-modal.spec.tsx
@@ -148,6 +148,26 @@ describe('FollowUpSettingModal', () => {
   })
 
   describe('Custom Prompt', () => {
+    it('should expose the selected prompt mode through RadioItem state attributes', async () => {
+      const user = userEvent.setup()
+      renderModal()
+
+      const defaultOption = screen
+        .getByText('appDebug.feature.suggestedQuestionsAfterAnswer.modal.defaultPromptOption')
+        .closest('button')!
+      const customOption = screen
+        .getByText('appDebug.feature.suggestedQuestionsAfterAnswer.modal.customPromptOption')
+        .closest('button')!
+
+      expect(defaultOption).toHaveAttribute('data-checked')
+      expect(customOption).not.toHaveAttribute('data-checked')
+
+      await user.click(customOption)
+
+      expect(defaultOption).not.toHaveAttribute('data-checked')
+      expect(customOption).toHaveAttribute('data-checked')
+    })
+
     it('should enable custom prompt input and save the custom prompt when selected', async () => {
       const user = userEvent.setup()
       const { onSave } = renderModal()
diff --git a/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx
index 02492c58524..a900ed972d4 100644
--- a/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx
@@ -2,7 +2,6 @@ import type { SuggestedQuestionsAfterAnswer } from '@/app/components/base/featur
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { CompletionParams, Model, ModelModeType } from '@/types/app'
 import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { Field, FieldItem } from '@langgenius/dify-ui/field'
 import { Fieldset, FieldsetLegend } from '@langgenius/dify-ui/fieldset'
@@ -158,12 +157,7 @@ const FollowUpSettingModal = ({ data, onSave, onCancel }: FollowUpSettingModalPr
                   value={PROMPT_MODE.default}
                   nativeButton
                   render={<button type="button" />}
-                  className={cn(
-                    'w-full rounded-xl border p-4 text-left transition-colors',
-                    promptMode === PROMPT_MODE.default
-                      ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg'
-                      : 'border-components-option-card-option-border bg-components-option-card-option-bg hover:bg-state-base-hover',
-                  )}
+                  className="w-full rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-4 text-left transition-colors hover:bg-state-base-hover data-checked:border-components-option-card-option-selected-border data-checked:bg-components-option-card-option-selected-bg data-checked:hover:bg-components-option-card-option-selected-bg"
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div>
@@ -200,12 +194,7 @@ const FollowUpSettingModal = ({ data, onSave, onCancel }: FollowUpSettingModalPr
                   value={PROMPT_MODE.custom}
                   nativeButton
                   render={<button type="button" />}
-                  className={cn(
-                    'w-full rounded-xl border p-4 text-left transition-colors',
-                    promptMode === PROMPT_MODE.custom
-                      ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg'
-                      : 'border-components-option-card-option-border bg-components-option-card-option-bg hover:bg-state-base-hover',
-                  )}
+                  className="w-full rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-4 text-left transition-colors hover:bg-state-base-hover data-checked:border-components-option-card-option-selected-border data-checked:bg-components-option-card-option-selected-bg data-checked:hover:bg-components-option-card-option-selected-bg"
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div>
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/__tests__/index.spec.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/__tests__/index.spec.tsx
index 6cd2e8e3cb3..d2b81c9c8d6 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/__tests__/index.spec.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/__tests__/index.spec.tsx
@@ -37,7 +37,11 @@ const createFileConfig = (overrides: Partial<FileUpload> = {}): FileUpload =>
 function renderAndOpen(props: Partial<React.ComponentProps<typeof FileFromLinkOrLocal>> = {}) {
   const trigger =
     props.trigger ??
-    ((open: boolean) => <button data-testid="trigger">{open ? 'Close' : 'Open'}</button>)
+    ((triggerProps, state) => (
+      <button {...triggerProps} data-testid="trigger">
+        {state.open ? 'Close' : 'Open'}
+      </button>
+    ))
   const result = render(
     <FileContextProvider value={mockFiles}>
       <FileFromLinkOrLocal
@@ -58,10 +62,13 @@ describe('FileFromLinkOrLocal', () => {
   })
 
   it('should render trigger element', () => {
-    const trigger = (open: boolean) => (
-      <button data-testid="trigger">
+    const trigger: NonNullable<React.ComponentProps<typeof FileFromLinkOrLocal>['trigger']> = (
+      triggerProps,
+      state,
+    ) => (
+      <button {...triggerProps} data-testid="trigger">
         Open
-        {open ? 'close' : 'open'}
+        {state.open ? 'close' : 'open'}
       </button>
     )
     render(
@@ -173,8 +180,13 @@ describe('FileFromLinkOrLocal', () => {
   })
 
   it('should toggle open state when trigger is clicked', () => {
-    const trigger = (open: boolean) => (
-      <button data-testid="trigger">{open ? 'Close' : 'Open'}</button>
+    const trigger: NonNullable<React.ComponentProps<typeof FileFromLinkOrLocal>['trigger']> = (
+      triggerProps,
+      state,
+    ) => (
+      <button {...triggerProps} data-testid="trigger">
+        {state.open ? 'Close' : 'Open'}
+      </button>
     )
     render(
       <FileContextProvider value={mockFiles}>
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
index b8a28bc8e9b..7311bb7c601 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -1,3 +1,4 @@
+import type { PopoverTriggerProps } from '@langgenius/dify-ui/popover'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
@@ -13,7 +14,7 @@ import { useStore } from '../store'
 type FileFromLinkOrLocalProps = {
   showFromLink?: boolean
   showFromLocal?: boolean
-  trigger: (open: boolean) => React.ReactElement
+  trigger: NonNullable<PopoverTriggerProps['render']>
   fileConfig: FileUpload
 }
 const FileFromLinkOrLocal = ({
@@ -24,7 +25,6 @@ const FileFromLinkOrLocal = ({
 }: FileFromLinkOrLocalProps) => {
   const { t } = useTranslation()
   const files = useStore((s) => s.files)
-  const [open, setOpen] = useState(false)
   const [url, setUrl] = useState('')
   const [showError, setShowError] = useState(false)
   const { handleLoadFileFromLink } = useFile(fileConfig)
@@ -48,8 +48,8 @@ const FileFromLinkOrLocal = ({
   }
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger render={trigger(open)} />
+    <Popover>
+      <PopoverTrigger render={trigger} />
       <PopoverContent
         placement="top"
         sideOffset={4}
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
index f484e4a20db..e418b793e2d 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
@@ -39,13 +39,13 @@ const FileUploaderInAttachment = ({ isDisabled, fileConfig }: FileUploaderInAtta
   ]
 
   const renderButton = useCallback(
-    (option: Option, open?: boolean) => {
+    (option: Option) => {
       return (
         <Button
           variant="tertiary"
           className={cn(
             'relative w-full min-w-0',
-            open && 'bg-components-button-tertiary-bg-hover',
+            'data-popup-open:bg-components-button-tertiary-bg-hover',
           )}
           disabled={!!(fileConfig.number_limits && files.length >= fileConfig.number_limits)}
         >
@@ -57,12 +57,6 @@ const FileUploaderInAttachment = ({ isDisabled, fileConfig }: FileUploaderInAtta
     },
     [fileConfig, files.length],
   )
-  const renderTrigger = useCallback(
-    (option: Option) => {
-      return (open: boolean) => renderButton(option, open)
-    },
-    [renderButton],
-  )
   const renderOption = useCallback(
     (option: Option) => {
       if (
@@ -84,14 +78,14 @@ const FileUploaderInAttachment = ({ isDisabled, fileConfig }: FileUploaderInAtta
           <div key={option.value} className="min-w-0 flex-1">
             <FileFromLinkOrLocal
               showFromLocal={false}
-              trigger={renderTrigger(option)}
+              trigger={renderButton(option)}
               fileConfig={fileConfig}
             />
           </div>
         )
       }
     },
-    [renderButton, renderTrigger, fileConfig],
+    [renderButton, fileConfig],
   )
 
   return (
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
index b40aa751641..847362548ba 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
@@ -11,35 +11,32 @@ type FileUploaderInChatInputProps = {
 }
 const FileUploaderInChatInput = ({ fileConfig, readonly }: FileUploaderInChatInputProps) => {
   const { t } = useTranslation()
-  const renderTrigger = useCallback(
-    (_open: boolean) => {
-      return (
-        <button
-          type="button"
-          aria-label={t(($) => $['fileUploader.uploadFromComputer'], { ns: 'common' })}
-          className={cn(
-            'inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg p-1.5 text-text-tertiary outline-hidden',
-            'hover:bg-state-base-hover hover:text-text-secondary',
-            'focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid',
-            'data-popup-open:bg-state-base-hover',
-            'disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled',
-          )}
-          disabled={readonly}
-        >
-          <span className="i-ri-attachment-line size-5" aria-hidden="true" />
-        </button>
-      )
-    },
-    [readonly, t],
-  )
+  const renderTrigger = useCallback(() => {
+    return (
+      <button
+        type="button"
+        aria-label={t(($) => $['fileUploader.uploadFromComputer'], { ns: 'common' })}
+        className={cn(
+          'inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg p-1.5 text-text-tertiary outline-hidden',
+          'hover:bg-state-base-hover hover:text-text-secondary',
+          'focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid',
+          'data-popup-open:bg-state-base-hover',
+          'disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:bg-transparent disabled:hover:text-text-disabled',
+        )}
+        disabled={readonly}
+      >
+        <span className="i-ri-attachment-line size-5" aria-hidden="true" />
+      </button>
+    )
+  }, [readonly, t])
 
   return (
     <span className="inline-flex size-8 shrink-0 items-center justify-center">
       {readonly ? (
-        renderTrigger(false)
+        renderTrigger()
       ) : (
         <FileFromLinkOrLocal
-          trigger={renderTrigger}
+          trigger={renderTrigger()}
           fileConfig={fileConfig}
           showFromLocal={fileConfig?.allowed_file_upload_methods?.includes(
             TransferMethod.local_file,
diff --git a/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx b/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx
index 948d62158dd..5f2407986b6 100644
--- a/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create/step-two/language-select/__tests__/index.spec.tsx
@@ -155,7 +155,7 @@ describe('LanguageSelect', () => {
 
       const trigger = screen.getByRole('combobox', { name: 'language' })
       expect(trigger).toBeDisabled()
-      expect(trigger).toHaveClass('cursor-not-allowed')
+      expect(trigger).toHaveAttribute('data-disabled')
     })
 
     it('should not open the listbox when disabled', () => {
diff --git a/web/app/components/datasets/create/step-two/language-select/index.tsx b/web/app/components/datasets/create/step-two/language-select/index.tsx
index 96a281807b0..122a1c58a1f 100644
--- a/web/app/components/datasets/create/step-two/language-select/index.tsx
+++ b/web/app/components/datasets/create/step-two/language-select/index.tsx
@@ -36,8 +36,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({ currentLanguage, onSelect, d
         aria-label="language"
         className={cn(
           'mx-1 w-auto shrink-0 bg-components-button-tertiary-bg text-components-button-tertiary-text hover:bg-components-button-tertiary-bg',
-          disabled &&
-            'cursor-not-allowed bg-components-button-tertiary-bg-disabled text-components-button-tertiary-text-disabled hover:bg-components-button-tertiary-bg-disabled',
+          'data-disabled:cursor-not-allowed data-disabled:bg-components-button-tertiary-bg-disabled data-disabled:text-components-button-tertiary-text-disabled data-disabled:hover:bg-components-button-tertiary-bg-disabled',
         )}
       >
         <SelectValue placeholder={<span>&nbsp;</span>} />
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx
index 761d5657fce..48bb5cdd385 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx
@@ -101,8 +101,11 @@ describe('CredentialSelector', () => {
 
       // Act - Click trigger to open dropdown
       const trigger = screen.getByTestId('popover-trigger')
+      expect(trigger).not.toHaveAttribute('data-popup-open')
       fireEvent.click(trigger)
 
+      expect(trigger).toHaveAttribute('data-popup-open', '')
+      expect(trigger.firstElementChild).toHaveClass('bg-state-base-hover')
       // Assert - All credentials should be visible (current credential appears in both trigger and list)
       // Assert - All credentials should be visible (current credential appears in both trigger and list)
       expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx
index b5b144647cf..ed516f2f52f 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx
@@ -1,4 +1,5 @@
 import type { DataSourceCredential } from '@/types/pipeline'
+import { cn } from '@langgenius/dify-ui/cn'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
@@ -37,9 +38,14 @@ const CredentialSelector = ({
 
   return (
     <Popover open={open} onOpenChange={set}>
-      <PopoverTrigger nativeButton={false} render={<div className="grow overflow-hidden" />}>
-        <Trigger currentCredential={currentCredential} isOpen={open} />
-      </PopoverTrigger>
+      <PopoverTrigger
+        nativeButton={false}
+        render={(props, state) => (
+          <div {...props} className={cn('grow overflow-hidden', props.className)}>
+            <Trigger currentCredential={currentCredential} isOpen={state.open} />
+          </div>
+        )}
+      />
       <PopoverContent
         placement="bottom-start"
         sideOffset={4}
diff --git a/web/app/components/datasets/extra-info/api-access/__tests__/index.spec.tsx b/web/app/components/datasets/extra-info/api-access/__tests__/index.spec.tsx
index f46e54d4691..fa71b6e0b04 100644
--- a/web/app/components/datasets/extra-info/api-access/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/extra-info/api-access/__tests__/index.spec.tsx
@@ -13,7 +13,14 @@ describe('ApiAccess', () => {
     const user = userEvent.setup()
     render(<ApiAccess expand apiEnabled />)
 
-    await user.click(screen.getByRole('button', { name: 'common.appMenus.apiAccess' }))
+    const trigger = screen.getByRole('button', { name: 'common.appMenus.apiAccess' })
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+    expect(trigger.firstElementChild).toHaveClass('hover:bg-state-base-hover')
+
+    await user.click(trigger)
+
+    expect(trigger).toHaveAttribute('data-popup-open', '')
+    expect(trigger.firstElementChild).toHaveClass('bg-state-base-hover')
 
     expect(screen.getByText('API enabled')).toBeInTheDocument()
   })
diff --git a/web/app/components/datasets/extra-info/api-access/index.tsx b/web/app/components/datasets/extra-info/api-access/index.tsx
index 9d48c39b23c..ff9f01d4a28 100644
--- a/web/app/components/datasets/extra-info/api-access/index.tsx
+++ b/web/app/components/datasets/extra-info/api-access/index.tsx
@@ -20,13 +20,17 @@ const ApiAccess = ({ expand, apiEnabled }: ApiAccessProps) => {
     <div className={cn(expand ? 'px-1 py-2' : 'flex justify-center px-3 py-2')}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
-          render={
-            <button type="button" className="w-full border-none bg-transparent p-0 text-left">
+          render={(props, state) => (
+            <button
+              {...props}
+              type="button"
+              className={cn('w-full border-none bg-transparent p-0 text-left', props.className)}
+            >
               <div
                 className={cn(
                   'relative flex h-8 cursor-pointer items-center gap-2 rounded-lg border border-components-panel-border px-3',
                   !expand && 'w-8 justify-center',
-                  open ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
+                  state.open ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
                 )}
               >
                 <ApiAggregate className="size-4 shrink-0 text-text-secondary" />
@@ -41,7 +45,7 @@ const ApiAccess = ({ expand, apiEnabled }: ApiAccessProps) => {
                 />
               </div>
             </button>
-          }
+          )}
         />
         <PopoverContent
           placement="top-start"
diff --git a/web/app/components/datasets/extra-info/service-api/__tests__/index.spec.tsx b/web/app/components/datasets/extra-info/service-api/__tests__/index.spec.tsx
index 4985a8dc546..f52a87be28c 100644
--- a/web/app/components/datasets/extra-info/service-api/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/extra-info/service-api/__tests__/index.spec.tsx
@@ -30,7 +30,14 @@ describe('ServiceApi', () => {
     const user = userEvent.setup()
     render(<ServiceApi apiBaseUrl="https://api.example.com" />)
 
-    await user.click(screen.getByRole('button', { name: 'dataset.serviceApi.title' }))
+    const trigger = screen.getByRole('button', { name: 'dataset.serviceApi.title' })
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+    expect(trigger.firstElementChild).toHaveClass('hover:bg-state-base-hover')
+
+    await user.click(trigger)
+
+    expect(trigger).toHaveAttribute('data-popup-open', '')
+    expect(trigger.firstElementChild).toHaveClass('bg-state-base-hover')
     await user.click(screen.getByRole('button', { name: 'dataset.serviceApi.card.apiKey' }))
 
     expect(screen.getByText('secret key modal')).toBeInTheDocument()
diff --git a/web/app/components/datasets/extra-info/service-api/index.tsx b/web/app/components/datasets/extra-info/service-api/index.tsx
index 43f2ef43f9a..f0cc583dea7 100644
--- a/web/app/components/datasets/extra-info/service-api/index.tsx
+++ b/web/app/components/datasets/extra-info/service-api/index.tsx
@@ -33,12 +33,16 @@ const ServiceApi = ({ apiBaseUrl }: ServiceApiProps) => {
     <div className="flex items-center">
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
-          render={
-            <button type="button" className="w-full border-none bg-transparent p-0 text-left">
+          render={(props, state) => (
+            <button
+              {...props}
+              type="button"
+              className={cn('w-full border-none bg-transparent p-0 text-left', props.className)}
+            >
               <div
                 className={cn(
                   'relative flex h-6 cursor-pointer items-center justify-center gap-1 overflow-hidden rounded-md px-1.5 py-1 text-text-tertiary',
-                  open ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
+                  state.open ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
                 )}
               >
                 <StatusDot className={cn('shrink-0')} status={apiBaseUrl ? 'success' : 'warning'} />
@@ -47,7 +51,7 @@ const ServiceApi = ({ apiBaseUrl }: ServiceApiProps) => {
                 </div>
               </div>
             </button>
-          }
+          )}
         />
         <PopoverContent
           placement="top-start"
diff --git a/web/app/components/datasets/metadata/base/__tests__/date-picker.spec.tsx b/web/app/components/datasets/metadata/base/__tests__/date-picker.spec.tsx
index 4cebb3f43ee..77d5256c658 100644
--- a/web/app/components/datasets/metadata/base/__tests__/date-picker.spec.tsx
+++ b/web/app/components/datasets/metadata/base/__tests__/date-picker.spec.tsx
@@ -11,16 +11,18 @@ type TriggerArgs = {
 type DatePickerProps = {
   onChange: (value: Date | null) => void
   onClear: () => void
-  renderTrigger: (args: TriggerArgs) => React.ReactNode
+  renderTrigger: (
+    props: React.HTMLAttributes<HTMLDivElement>,
+    state: { open: boolean },
+    args: TriggerArgs,
+  ) => React.ReactNode
   value?: Date
 }
 
 // Mock the base date picker component
 vi.mock('@/app/components/base/date-and-time-picker/date-picker', () => ({
   default: ({ onChange, onClear, renderTrigger, value }: DatePickerProps) => {
-    const trigger = renderTrigger({
-      handleClickTrigger: () => {},
-    })
+    const trigger = renderTrigger({}, { open: false }, { handleClickTrigger: () => {} })
     return (
       <div role="group" aria-label="Date picker">
         {trigger}
diff --git a/web/app/components/datasets/metadata/base/date-picker.tsx b/web/app/components/datasets/metadata/base/date-picker.tsx
index 1f21629d431..27255c02607 100644
--- a/web/app/components/datasets/metadata/base/date-picker.tsx
+++ b/web/app/components/datasets/metadata/base/date-picker.tsx
@@ -1,4 +1,7 @@
-import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
+import type {
+  DatePickerProps,
+  TriggerProps,
+} from '@/app/components/base/date-and-time-picker/types'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiCalendarLine, RiCloseCircleFill } from '@remixicon/react'
 import { useQuery } from '@tanstack/react-query'
@@ -31,8 +34,8 @@ const WrappedDatePicker = ({ className, label, value, onChange }: Props) => {
     [onChange],
   )
 
-  const renderTrigger = useCallback(
-    ({ handleClickTrigger }: TriggerProps) => {
+  const renderTrigger = useCallback<NonNullable<DatePickerProps['renderTrigger']>>(
+    (props, _state, { handleClickTrigger }: TriggerProps) => {
       const hasValue = Boolean(value)
       const triggerText = value
         ? formatTimestamp(
@@ -44,9 +47,11 @@ const WrappedDatePicker = ({ className, label, value, onChange }: Props) => {
 
       return (
         <div
+          {...props}
           className={cn(
             'group flex items-center rounded-md bg-components-input-bg-normal',
             className,
+            props.className,
           )}
         >
           <button
diff --git a/web/app/components/header/account-dropdown/__tests__/index.spec.tsx b/web/app/components/header/account-dropdown/__tests__/index.spec.tsx
index 2ee71387918..a01c3999904 100644
--- a/web/app/components/header/account-dropdown/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-dropdown/__tests__/index.spec.tsx
@@ -62,8 +62,8 @@ const renderAccountDropdown = () => {
 
   return renderWithConsoleQuery(
     <AccountDropdown
-      trigger={({ isOpen, ariaLabel }) => (
-        <button type="button" aria-label={ariaLabel} data-open={isOpen}>
+      trigger={({ ariaLabel }) => (
+        <button type="button" aria-label={ariaLabel}>
           Current account
         </button>
       )}
@@ -120,12 +120,12 @@ describe('AccountDropdown', () => {
     renderAccountDropdown()
 
     const trigger = screen.getByRole('button', { name: 'common.account.account' })
-    expect(trigger).toHaveAttribute('data-open', 'false')
+    expect(trigger).not.toHaveAttribute('data-popup-open')
 
     await user.click(trigger)
 
     expect(await screen.findByText('current@example.com')).toBeInTheDocument()
-    expect(trigger).toHaveAttribute('data-open', 'true')
+    expect(trigger).toHaveAttribute('data-popup-open', '')
     expect(screen.getByText('common.settings.preferences')).toBeInTheDocument()
     expect(screen.getByText('common.account.appearanceLabel')).toBeInTheDocument()
   })
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index cc887ab8025..a2ec1e14b65 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -14,7 +14,7 @@ import { useLogout } from '@/service/use-common'
 import { MainNavMenuContent } from './main-nav-menu-content'
 
 type AccountDropdownProps = {
-  trigger: (props: { isOpen: boolean; ariaLabel: string }) => ReactElement
+  trigger: (props: { ariaLabel: string }) => ReactElement
 }
 
 const mainNavMenuPopupClassName =
@@ -50,7 +50,6 @@ export default function AccountDropdown({ trigger }: AccountDropdownProps) {
         <DropdownMenuTrigger
           disabled={isHydrating}
           render={trigger({
-            isOpen: isAccountMenuOpen,
             ariaLabel: t(($) => $['account.account'], { ns: 'common' }),
           })}
         />
diff --git a/web/app/components/header/account-setting/__tests__/workspace-role-checkbox-list.spec.tsx b/web/app/components/header/account-setting/__tests__/workspace-role-checkbox-list.spec.tsx
index e9d6ba41c3a..146398085b1 100644
--- a/web/app/components/header/account-setting/__tests__/workspace-role-checkbox-list.spec.tsx
+++ b/web/app/components/header/account-setting/__tests__/workspace-role-checkbox-list.spec.tsx
@@ -72,10 +72,28 @@ describe('WorkspaceRoleCheckboxList', () => {
       />,
     )
 
-    expect(screen.getByRole('radio', { name: /First role/i })).toBeInTheDocument()
+    const selectedRole = screen.getByRole('radio', { name: /First role/i })
+    const unselectedRole = screen.getByRole('radio', { name: /Second role/i })
+    expect(selectedRole).toHaveAttribute('data-checked', '')
+    expect(unselectedRole).not.toHaveAttribute('data-checked')
     expect(screen.queryByRole('checkbox', { name: /First role/i })).not.toBeInTheDocument()
   })
 
+  it('should expose disabled state on single-role options', () => {
+    render(
+      <WorkspaceRoleCheckboxList
+        selectedRoleIds={['role-1']}
+        selectedRoles={[mockRoles[0]!]}
+        allowMultipleRoles={false}
+        disabledRoleIds={['role-1']}
+        onSelectedRolesChange={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByRole('radio', { name: /First role/i })).toHaveAttribute('data-disabled', '')
+    expect(screen.getByRole('radio', { name: /Second role/i })).not.toHaveAttribute('data-disabled')
+  })
+
   it('should show legacy role descriptions when only one role is allowed', () => {
     vi.mocked(useWorkspaceRoleList).mockReturnValue({
       data: {
diff --git a/web/app/components/header/account-setting/access-rules-page/__tests__/access-rule-section.spec.tsx b/web/app/components/header/account-setting/access-rules-page/__tests__/access-rule-section.spec.tsx
index 8fbd7054571..2f7b61b036d 100644
--- a/web/app/components/header/account-setting/access-rules-page/__tests__/access-rule-section.spec.tsx
+++ b/web/app/components/header/account-setting/access-rules-page/__tests__/access-rule-section.spec.tsx
@@ -202,7 +202,7 @@ describe('AccessRuleSection', () => {
     expect(onCreate).toHaveBeenCalledTimes(1)
   })
 
-  it('should keep row actions when workspace role management is allowed', () => {
+  it('should keep row actions when workspace role management is allowed', async () => {
     mocks.workspacePermissionKeys = ['workspace.role.manage']
 
     renderWithQueryClient(
@@ -215,7 +215,12 @@ describe('AccessRuleSection', () => {
       />,
     )
 
-    expect(screen.getByRole('button', { name: 'common.operation.moreActions' })).toBeInTheDocument()
+    const trigger = screen.getByRole('button', { name: 'common.operation.moreActions' })
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+
+    await userEvent.click(trigger)
+
+    expect(trigger).toHaveAttribute('data-popup-open', '')
   })
 
   it('should hide create action when workspace role management is missing', () => {
diff --git a/web/app/components/header/account-setting/access-rules-page/access-rule-row-menu.tsx b/web/app/components/header/account-setting/access-rules-page/access-rule-row-menu.tsx
index 20fda9555ae..bbc216be397 100644
--- a/web/app/components/header/account-setting/access-rules-page/access-rule-row-menu.tsx
+++ b/web/app/components/header/account-setting/access-rules-page/access-rule-row-menu.tsx
@@ -78,7 +78,7 @@ const AccessRuleRowMenu = ({ rule, onView, onEdit }: AccessRuleRowMenuProps) =>
           render={
             <ActionButton
               size="l"
-              className={open ? 'bg-state-base-hover' : ''}
+              className="data-popup-open:bg-state-base-hover"
               aria-label={t(($) => $['operation.moreActions'], { ns: 'common' })}
             />
           }
diff --git a/web/app/components/header/account-setting/api-based-extension-page/__tests__/selector.spec.tsx b/web/app/components/header/account-setting/api-based-extension-page/__tests__/selector.spec.tsx
index 75f0b4267cc..78d91d333cf 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/__tests__/selector.spec.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/__tests__/selector.spec.tsx
@@ -93,11 +93,18 @@ describe('ApiBasedExtensionSelector', () => {
     it('should open dropdown when clicked', async () => {
       // Act
       render(<ApiBasedExtensionSelector value="" onChange={mockOnChange} />)
+      const popoverTrigger = screen.getByTestId('popover-trigger')
       const trigger = screen.getByText('common.apiBasedExtension.selector.placeholder')
+      const arrow = trigger.parentElement?.querySelector('[aria-hidden="true"]')
+      expect(popoverTrigger).not.toHaveAttribute('data-popup-open')
+      expect(arrow).toHaveClass('opacity-60')
+
       fireEvent.click(trigger)
 
       // Assert
       // Assert
+      expect(popoverTrigger).toHaveAttribute('data-popup-open', '')
+      expect(arrow).not.toHaveClass('opacity-60')
       expect(
         await screen.findByText('common.apiBasedExtension.selector.title'),
       )!.toBeInTheDocument()
diff --git a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
index 925b6526b41..11df6400e54 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@langgenius/dify-ui/cn'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { useQuery } from '@tanstack/react-query'
 import { useQueryState } from 'nuqs'
@@ -41,8 +42,12 @@ export function ApiBasedExtensionSelector({ value, onChange }: ApiBasedExtension
     <>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
-          render={
-            <button type="button" className="block w-full border-0 bg-transparent p-0 text-left">
+          render={(props, state) => (
+            <button
+              {...props}
+              type="button"
+              className={cn('block w-full border-0 bg-transparent p-0 text-left', props.className)}
+            >
               {currentItem ? (
                 <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pr-2.5 pl-3">
                   <div className="text-sm text-text-primary">{currentItem.name}</div>
@@ -51,7 +56,10 @@ export function ApiBasedExtensionSelector({ value, onChange }: ApiBasedExtension
                       {currentItem.api_endpoint}
                     </div>
                     <span
-                      className={`i-ri-arrow-down-s-line size-4 text-text-secondary ${!open && 'opacity-60'}`}
+                      className={cn(
+                        'i-ri-arrow-down-s-line size-4 text-text-secondary',
+                        !state.open && 'opacity-60',
+                      )}
                       aria-hidden="true"
                     />
                   </div>
@@ -62,13 +70,16 @@ export function ApiBasedExtensionSelector({ value, onChange }: ApiBasedExtension
                     ns: 'common',
                   })}
                   <span
-                    className={`i-ri-arrow-down-s-line h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`}
+                    className={cn(
+                      'i-ri-arrow-down-s-line h-4 w-4 text-text-secondary',
+                      !state.open && 'opacity-60',
+                    )}
                     aria-hidden="true"
                   />
                 </div>
               )}
             </button>
-          }
+          )}
         />
         <PopoverContent
           placement="bottom-start"
diff --git a/web/app/components/header/account-setting/data-source-page-new/plugin-actions.tsx b/web/app/components/header/account-setting/data-source-page-new/plugin-actions.tsx
index 781772ca402..d53bd2d6bdf 100644
--- a/web/app/components/header/account-setting/data-source-page-new/plugin-actions.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/plugin-actions.tsx
@@ -101,7 +101,7 @@ const DataSourcePluginActions = ({ detail, onUpdate }: Props) => {
           pluginID={detail.plugin_id}
           currentVersion={detail.version}
           onSelect={handleVersionSelect}
-          trigger={
+          trigger={() => (
             <Badge
               className="h-5 px-1.5"
               text={
@@ -118,7 +118,7 @@ const DataSourcePluginActions = ({ detail, onUpdate }: Props) => {
               hasRedCornerMark={hasNewVersion}
               uppercase={false}
             />
-          }
+          )}
         />
       )}
       {canUpdatePlugin && (hasNewVersion || isFromGitHub) && (
diff --git a/web/app/components/header/account-setting/model-provider-page/__tests__/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/__tests__/index.spec.tsx
index 5f0fd4805ef..1c11ae83740 100644
--- a/web/app/components/header/account-setting/model-provider-page/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/__tests__/index.spec.tsx
@@ -302,21 +302,27 @@ vi.mock('@/app/components/base/date-and-time-picker/time-picker', () => ({
   }: {
     value?: string | { format: (format: string) => string }
     onChange: (value: { hour: () => number; minute: () => number }) => void
-    renderTrigger: (params: {
-      inputElem: ReactNode
-      onClick: () => void
-      isOpen: boolean
-    }) => ReactNode
+    renderTrigger: (
+      props: Record<string, never>,
+      state: { open: boolean },
+      params: {
+        inputElem: ReactNode
+        onClick: () => void
+      },
+    ) => ReactNode
   }) => {
     const displayValue = typeof value === 'string' ? value : value?.format('HH:mm')
 
     return (
       <div data-testid="update-time-picker">
-        {renderTrigger({
-          inputElem: <span data-testid="update-time-value">{displayValue}</span>,
-          onClick: vi.fn(),
-          isOpen: false,
-        })}
+        {renderTrigger(
+          {},
+          { open: false },
+          {
+            inputElem: <span data-testid="update-time-value">{displayValue}</span>,
+            onClick: vi.fn(),
+          },
+        )}
         <button
           type="button"
           onClick={() =>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/add-custom-model.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/add-custom-model.spec.tsx
index d19db3d69f4..141fa24cd53 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/add-custom-model.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/add-custom-model.spec.tsx
@@ -106,9 +106,13 @@ describe('AddCustomModel', () => {
       />,
     )
 
-    fireEvent.click(screen.getByTestId('popover-trigger'))
+    const trigger = screen.getByTestId('popover-trigger')
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+
+    fireEvent.click(trigger)
 
     // The portal should be "open"
+    expect(trigger).toHaveAttribute('data-popup-open', '')
     expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'true')
     expect(screen.getByText('gpt-4')).toBeInTheDocument()
     expect(screen.getByTestId('model-icon')).toBeInTheDocument()
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
index 2faee238e33..d77a4a33950 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
@@ -98,7 +98,11 @@ const AddCustomModel = ({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger
         nativeButton={false}
-        render={<div className="inline-block">{renderTrigger(open)}</div>}
+        render={(props, state) => (
+          <div {...props} className={cn('inline-block', props.className)}>
+            {renderTrigger(state.open)}
+          </div>
+        )}
       />
       <PopoverContent
         placement="bottom-end"
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/index.spec.tsx
index 7db7c373fd4..1fd6c530d0a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/index.spec.tsx
@@ -119,7 +119,13 @@ describe('Authorized', () => {
       />,
     )
 
+    const trigger = screen.getByTestId('popover-trigger')
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+
     fireEvent.click(screen.getByRole('button', { name: /trigger\s*closed/i }))
+
+    expect(trigger).toHaveAttribute('data-popup-open', '')
+    expect(screen.getByRole('button', { name: /trigger\s*open/i })).toBeInTheDocument()
     expect(screen.getByTestId('authorized-item'))!.toBeInTheDocument()
     expect(screen.getByRole('button', { name: /addApiKey/i }))!.toBeInTheDocument()
   })
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
index 6a731210bdc..ea37e514546 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
@@ -177,11 +177,14 @@ const Authorized = ({
       <Popover open={mergedIsOpen} onOpenChange={setMergedIsOpen}>
         <PopoverTrigger
           nativeButton={false}
-          render={
-            <div className={triggerPopupSameWidth ? 'w-full' : 'inline-block'}>
-              {renderTrigger(mergedIsOpen)}
+          render={(props, state) => (
+            <div
+              {...props}
+              className={cn(triggerPopupSameWidth ? 'w-full' : 'inline-block', props.className)}
+            >
+              {renderTrigger(state.open)}
             </div>
-          }
+          )}
           onClick={handleTriggerClick}
         />
         <PopoverContent
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/index.spec.tsx
index 77a9530d9d8..4fcd4417a8d 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/index.spec.tsx
@@ -367,9 +367,13 @@ describe('ModelParameterModal', () => {
       />,
     )
 
+    const trigger = screen.getByText('Custom Closed').closest('button')
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+
     fireEvent.click(screen.getByText('Custom Closed'))
 
     expect(screen.getByText('Custom Open')).toBeInTheDocument()
+    expect(trigger).toHaveAttribute('data-popup-open', '')
     expect(screen.getByTestId('model-selector')).toBeInTheDocument()
 
     fireEvent.click(screen.getByText('hide'))
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
index e730f48a868..068d962988b 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
@@ -126,20 +126,24 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
     >
       {renderTrigger ? (
         <PopoverTrigger
-          render={
+          render={(props, state) => (
             <button
+              {...props}
               type="button"
-              className="block w-full border-none bg-transparent p-0 text-left text-inherit [font:inherit]"
+              className={cn(
+                'block w-full border-none bg-transparent p-0 text-left text-inherit [font:inherit]',
+                props.className,
+              )}
             >
               {renderTrigger({
-                open,
+                open: state.open,
                 currentProvider,
                 currentModel,
                 providerName: provider,
                 modelId,
               })}
             </button>
-          }
+          )}
         />
       ) : (
         <div className="flex h-8 min-w-74 items-center gap-px overflow-hidden rounded-lg">
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/provider-card-actions.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/provider-card-actions.spec.tsx
index 1266c7d9058..8a68107c8f4 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/provider-card-actions.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/provider-card-actions.spec.tsx
@@ -83,12 +83,12 @@ vi.mock('@/app/components/plugins/update-plugin/plugin-version-picker', () => ({
     onSelect,
     disabled,
   }: {
-    trigger: ReactNode
+    trigger: (open: boolean) => ReactNode
     onSelect: (state: { version: string; unique_identifier: string; isDowngrade?: boolean }) => void
     disabled?: boolean
   }) => (
     <div data-testid="plugin-version-picker" data-disabled={String(Boolean(disabled))}>
-      {trigger}
+      {trigger(false)}
       <button
         type="button"
         onClick={() =>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
index df81c049067..e3ff3abaac1 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
@@ -93,7 +93,7 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
             onSelect={handleVersionSelect}
             sideOffset={4}
             alignOffset={0}
-            trigger={
+            trigger={() => (
               <Badge
                 className={cn(
                   canUpdatePlugin &&
@@ -111,7 +111,7 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
                 }
                 hasRedCornerMark={hasNewVersion}
               />
-            }
+            )}
           />
           {isDebuggingPlugin && (
             <Badge
diff --git a/web/app/components/header/account-setting/permissions-page/role-list/__tests__/row-menu.spec.tsx b/web/app/components/header/account-setting/permissions-page/role-list/__tests__/row-menu.spec.tsx
index 926547483f7..879ae1567da 100644
--- a/web/app/components/header/account-setting/permissions-page/role-list/__tests__/row-menu.spec.tsx
+++ b/web/app/components/header/account-setting/permissions-page/role-list/__tests__/row-menu.spec.tsx
@@ -73,7 +73,12 @@ const createRole = (overrides: Partial<Role> = {}): Role => ({
 
 const openMenu = async () => {
   const user = userEvent.setup()
-  await user.click(screen.getByRole('button', { name: 'common.operation.moreActions' }))
+  const trigger = screen.getByRole('button', { name: 'common.operation.moreActions' })
+  expect(trigger).not.toHaveAttribute('data-popup-open')
+
+  await user.click(trigger)
+
+  expect(trigger).toHaveAttribute('data-popup-open', '')
   const menus = screen.getAllByRole('menu')
   return {
     user,
diff --git a/web/app/components/header/account-setting/permissions-page/role-list/row-menu.tsx b/web/app/components/header/account-setting/permissions-page/role-list/row-menu.tsx
index a38a0359e8b..6693bae72c2 100644
--- a/web/app/components/header/account-setting/permissions-page/role-list/row-menu.tsx
+++ b/web/app/components/header/account-setting/permissions-page/role-list/row-menu.tsx
@@ -9,7 +9,6 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
-import { cn } from '@langgenius/dify-ui/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -114,7 +113,7 @@ const RowMenu = ({ roleCategory, role, onView, onEdit }: RowMenuProps) => {
           render={
             <ActionButton
               size="m"
-              className={cn('shrink-0', open && 'bg-state-base-hover')}
+              className="shrink-0 data-popup-open:bg-state-base-hover"
               aria-label={t(($) => $['operation.moreActions'], { ns: 'common' })}
             />
           }
diff --git a/web/app/components/header/account-setting/update-setting-dialog-form.tsx b/web/app/components/header/account-setting/update-setting-dialog-form.tsx
index bc9aa90eca0..225f846fc77 100644
--- a/web/app/components/header/account-setting/update-setting-dialog-form.tsx
+++ b/web/app/components/header/account-setting/update-setting-dialog-form.tsx
@@ -1,5 +1,5 @@
-import type { ReactElement, ReactNode } from 'react'
-import type { TriggerParams } from '@/app/components/base/date-and-time-picker/types'
+import type { ReactNode } from 'react'
+import type { TimePickerProps } from '@/app/components/base/date-and-time-picker/types'
 import type { AutoUpdateConfig } from '@/app/components/plugins/reference-setting-modal/auto-update-setting/types'
 import type { dayjsToTimeOfDay } from '@/app/components/plugins/reference-setting-modal/auto-update-setting/utils'
 import type { PluginCategoryEnum } from '@/app/components/plugins/types'
@@ -39,7 +39,7 @@ type UpdateSettingDialogFormProps = {
   onPluginsChange: (newPlugins: string[]) => void
   onRequestClose: () => void
   onUpdateTimeChange: (value: Parameters<typeof dayjsToTimeOfDay>[0]) => void
-  renderTimePickerTrigger: (params: TriggerParams) => ReactElement
+  renderTimePickerTrigger: NonNullable<TimePickerProps['renderTrigger']>
 }
 
 const updateSettingFormLabelClassName =
diff --git a/web/app/components/header/account-setting/update-setting-dialog.tsx b/web/app/components/header/account-setting/update-setting-dialog.tsx
index 0e67bf06f0c..867d9765ec8 100644
--- a/web/app/components/header/account-setting/update-setting-dialog.tsx
+++ b/web/app/components/header/account-setting/update-setting-dialog.tsx
@@ -1,6 +1,9 @@
 'use client'
 
-import type { TriggerParams } from '@/app/components/base/date-and-time-picker/types'
+import type {
+  TimePickerProps,
+  TriggerParams,
+} from '@/app/components/base/date-and-time-picker/types'
 import type { AutoUpdateConfig } from '@/app/components/plugins/reference-setting-modal/auto-update-setting/types'
 import type { PluginCategoryEnum } from '@/app/components/plugins/types'
 import { Button } from '@langgenius/dify-ui/button'
@@ -203,19 +206,26 @@ const UpdateSettingDialog = ({ category, disabled = false }: Props) => {
     setDraftAutoUpgrade(undefined)
     setIsOpen(false)
   }, [autoUpgrade, saveAutoUpgrade])
-  const renderTimePickerTrigger = useCallback(
-    ({ inputElem, onClick, isOpen }: TriggerParams) => {
+  const renderTimePickerTrigger = useCallback<NonNullable<TimePickerProps['renderTrigger']>>(
+    (props, state, { inputElem, onClick }: TriggerParams) => {
       return (
         <button
+          {...props}
           type="button"
-          className="group flex h-8 w-full cursor-pointer items-center gap-1 rounded-lg border-none bg-components-input-bg-normal px-2 py-1 text-left shadow-none hover:bg-state-base-hover-alt focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
-          onClick={onClick}
+          className={cn(
+            'group flex h-8 w-full cursor-pointer items-center gap-1 rounded-lg border-none bg-components-input-bg-normal px-2 py-1 text-left shadow-none hover:bg-state-base-hover-alt focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
+            props.className,
+          )}
+          onClick={(event) => {
+            onClick(event)
+            props.onClick?.(event)
+          }}
         >
           <span
             aria-hidden
             className={cn(
               'i-ri-time-line size-4 shrink-0 text-text-tertiary',
-              isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
+              state.open ? 'text-text-secondary' : 'group-hover:text-text-secondary',
             )}
           />
           <span className="min-w-0 flex-1 p-1 system-sm-regular text-components-input-text-filled">
diff --git a/web/app/components/header/account-setting/workspace-role-checkbox-list.tsx b/web/app/components/header/account-setting/workspace-role-checkbox-list.tsx
index e199b8d3fdf..98e292dfcb8 100644
--- a/web/app/components/header/account-setting/workspace-role-checkbox-list.tsx
+++ b/web/app/components/header/account-setting/workspace-role-checkbox-list.tsx
@@ -293,7 +293,6 @@ const WorkspaceRoleCheckboxList = ({
                     render={<ul />}
                   >
                     {filteredRoles.map((role) => {
-                      const checked = selectedRoleIdSet.has(role.id)
                       const disabled = disabledRoleIdSet.has(role.id)
 
                       return (
@@ -307,8 +306,8 @@ const WorkspaceRoleCheckboxList = ({
                                 type="button"
                                 className={cn(
                                   'flex w-full cursor-pointer items-start gap-3 rounded-lg border-0 bg-transparent px-3 py-2.5 text-left hover:bg-state-base-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-components-input-border-active',
-                                  checked && 'bg-state-accent-hover hover:bg-state-accent-hover',
-                                  disabled && 'cursor-not-allowed opacity-50 hover:bg-transparent',
+                                  'data-checked:bg-state-accent-hover data-checked:hover:bg-state-accent-hover',
+                                  'data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-checked:data-disabled:hover:bg-transparent',
                                 )}
                               />
                             }
diff --git a/web/app/components/main-nav/__tests__/index.spec.tsx b/web/app/components/main-nav/__tests__/index.spec.tsx
index 59ea648e54d..28ffe7d69ea 100644
--- a/web/app/components/main-nav/__tests__/index.spec.tsx
+++ b/web/app/components/main-nav/__tests__/index.spec.tsx
@@ -977,7 +977,12 @@ describe('MainNav', () => {
 
     renderMainNav({ enable_learn_app: true })
 
-    fireEvent.click(screen.getByRole('button', { name: 'common.mainNav.help.openMenu' }))
+    const helpTrigger = screen.getByRole('button', { name: 'common.mainNav.help.openMenu' })
+    expect(helpTrigger).not.toHaveAttribute('data-popup-open')
+
+    fireEvent.click(helpTrigger)
+
+    expect(helpTrigger).toHaveAttribute('data-popup-open', '')
     const learnDifyItem = await screen.findByRole('menuitemcheckbox', {
       name: 'common.mainNav.help.learnDify',
     })
diff --git a/web/app/components/main-nav/components/__tests__/workspace-card.spec.tsx b/web/app/components/main-nav/components/__tests__/workspace-card.spec.tsx
index c7065a0650d..d98a2736672 100644
--- a/web/app/components/main-nav/components/__tests__/workspace-card.spec.tsx
+++ b/web/app/components/main-nav/components/__tests__/workspace-card.spec.tsx
@@ -332,7 +332,14 @@ describe('WorkspaceCard', () => {
   it('opens workspace actions and switcher in a popover panel', async () => {
     renderWorkspaceCard()
 
-    fireEvent.click(screen.getByRole('button', { name: 'common.mainNav.workspace.openMenu' }))
+    const workspaceTrigger = screen.getByRole('button', {
+      name: 'common.mainNav.workspace.openMenu',
+    })
+    expect(workspaceTrigger).not.toHaveAttribute('data-popup-open')
+
+    fireEvent.click(workspaceTrigger)
+
+    expect(workspaceTrigger).toHaveAttribute('data-popup-open', '')
 
     const panel = await screen.findByRole('dialog', { name: 'Solar Studio' })
     expect(panel).toBeInTheDocument()
@@ -420,7 +427,14 @@ describe('WorkspaceCard', () => {
 
     expect(defaultWorkspaceOptions).toEqual(['Atlas Workspace', 'Solar Studio', 'Evan Workspace'])
 
-    fireEvent.click(screen.getByRole('button', { name: 'common.mainNav.workspace.sort.openMenu' }))
+    const sortTrigger = screen.getByRole('button', {
+      name: 'common.mainNav.workspace.sort.openMenu',
+    })
+    expect(sortTrigger).not.toHaveAttribute('data-popup-open')
+
+    fireEvent.click(sortTrigger)
+
+    expect(sortTrigger).toHaveAttribute('data-popup-open', '')
 
     expect(
       await screen.findByRole('menuitemradio', {
diff --git a/web/app/components/main-nav/components/account-section.tsx b/web/app/components/main-nav/components/account-section.tsx
index d818f2ca903..3f91d1549de 100644
--- a/web/app/components/main-nav/components/account-section.tsx
+++ b/web/app/components/main-nav/components/account-section.tsx
@@ -18,7 +18,7 @@ const AccountSection = ({ compact = false }: AccountSectionProps) => {
 
   return (
     <AccountDropdown
-      trigger={({ isOpen, ariaLabel }) => (
+      trigger={({ ariaLabel }) => (
         <button
           type="button"
           aria-label={ariaLabel}
@@ -26,7 +26,7 @@ const AccountSection = ({ compact = false }: AccountSectionProps) => {
           className={cn(
             'flex min-w-0 shrink items-center rounded-full text-left text-components-main-nav-text transition-colors hover:bg-state-base-hover focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid focus-visible:outline-hidden disabled:cursor-default disabled:hover:bg-transparent',
             compact ? 'justify-center p-1' : 'max-w-45 gap-3 py-1 pr-4 pl-1',
-            isOpen && 'bg-state-base-hover',
+            'data-popup-open:bg-state-base-hover',
           )}
         >
           <Avatar
diff --git a/web/app/components/main-nav/components/help-menu.tsx b/web/app/components/main-nav/components/help-menu.tsx
index 9539b86f702..b3bddb5e693 100644
--- a/web/app/components/main-nav/components/help-menu.tsx
+++ b/web/app/components/main-nav/components/help-menu.tsx
@@ -144,7 +144,7 @@ const HelpMenu = ({ triggerIcon = defaultTriggerIcon, triggerClassName }: HelpMe
           className={cn(
             'inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full border border-components-card-border bg-components-card-bg p-0 text-text-tertiary shadow-xs transition-colors hover:bg-components-card-bg-alt hover:text-saas-dify-blue-inverted focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
             triggerClassName,
-            open && 'bg-components-card-bg-alt text-saas-dify-blue-inverted',
+            'data-popup-open:bg-components-card-bg-alt data-popup-open:text-saas-dify-blue-inverted',
             skipRecoveryVisible && styles.stepByStepTourRecoveryPulse,
           )}
         >
diff --git a/web/app/components/main-nav/components/workspace-card.tsx b/web/app/components/main-nav/components/workspace-card.tsx
index 6b7e0145e3d..b194b89f59f 100644
--- a/web/app/components/main-nav/components/workspace-card.tsx
+++ b/web/app/components/main-nav/components/workspace-card.tsx
@@ -85,7 +85,6 @@ function WorkspaceCreditsLabel({ credits, unit }: { credits: string; unit: strin
 }
 
 function WorkspaceCardTrigger({
-  open,
   name,
   status,
   credits,
@@ -96,7 +95,6 @@ function WorkspaceCardTrigger({
   onPrefetchWorkspaces,
   onPlanClick,
 }: {
-  open: boolean
   name: string
   status: ReactNode
   credits: number
@@ -122,7 +120,7 @@ function WorkspaceCardTrigger({
         className={cn(
           'flex w-full items-center gap-1.5 py-1.5 pr-3 pl-1.5 text-left transition-colors hover:bg-state-base-hover focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid focus-visible:outline-hidden',
           showCloudBilling ? 'rounded-t-xl' : 'rounded-xl',
-          open && 'bg-linear-to-b from-background-section-burn to-background-section',
+          'data-popup-open:bg-linear-to-b data-popup-open:from-background-section-burn data-popup-open:to-background-section',
         )}
       >
         <WorkspaceAvatar name={name} size="sm" />
@@ -309,7 +307,6 @@ export function WorkspaceCard() {
     <Popover open={open} onOpenChange={setOpen}>
       <>
         <WorkspaceCardTrigger
-          open={open}
           name={currentWorkspace.name}
           status={renderWorkspaceStatus()}
           credits={currentWorkspace.credits}
diff --git a/web/app/components/main-nav/components/workspace-switcher.tsx b/web/app/components/main-nav/components/workspace-switcher.tsx
index 437609638e8..885c4a647ba 100644
--- a/web/app/components/main-nav/components/workspace-switcher.tsx
+++ b/web/app/components/main-nav/components/workspace-switcher.tsx
@@ -77,7 +77,7 @@ function WorkspaceSwitchControls({
             disabled={disabled}
             className={cn(
               workspaceSwitchActionButtonClassName,
-              sortMenuOpen && 'bg-state-base-hover text-text-secondary',
+              'data-popup-open:bg-state-base-hover data-popup-open:text-text-secondary',
             )}
           >
             <span aria-hidden className={workspaceSwitchActionIconWrapClassName}>
diff --git a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
index c4dda63b266..9c422cf0288 100644
--- a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
+++ b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
@@ -30,7 +30,6 @@ function TagsFilter({ tags, onTagsChange, usedInMarketplace = false }: TagsFilte
       {usedInMarketplace && (
         <MarketplaceTrigger
           selectedTagsLength={selectedTagsLength}
-          open={open}
           tags={tags}
           tagsMap={tagsMap}
           onTagsChange={onTagsChange}
@@ -39,7 +38,6 @@ function TagsFilter({ tags, onTagsChange, usedInMarketplace = false }: TagsFilte
       {!usedInMarketplace && (
         <ToolSelectorTrigger
           selectedTagsLength={selectedTagsLength}
-          open={open}
           tags={tags}
           tagsMap={tagsMap}
           onTagsChange={onTagsChange}
diff --git a/web/app/components/plugins/marketplace/search-box/trigger/__tests__/marketplace.spec.tsx b/web/app/components/plugins/marketplace/search-box/trigger/__tests__/marketplace.spec.tsx
index d806b12391d..9d80c133894 100644
--- a/web/app/components/plugins/marketplace/search-box/trigger/__tests__/marketplace.spec.tsx
+++ b/web/app/components/plugins/marketplace/search-box/trigger/__tests__/marketplace.spec.tsx
@@ -18,7 +18,6 @@ describe('MarketplaceTrigger', () => {
       <Popover>
         <MarketplaceTrigger
           selectedTagsLength={0}
-          open={false}
           tags={[]}
           tagsMap={tagsMap}
           onTagsChange={vi.fn()}
@@ -37,7 +36,6 @@ describe('MarketplaceTrigger', () => {
       <Popover>
         <MarketplaceTrigger
           selectedTagsLength={3}
-          open
           tags={['agent', 'rag', 'search']}
           tagsMap={tagsMap}
           onTagsChange={vi.fn()}
@@ -58,7 +56,6 @@ describe('MarketplaceTrigger', () => {
         <Popover>
           <MarketplaceTrigger
             selectedTagsLength={tags.length}
-            open={false}
             tags={tags}
             tagsMap={tagsMap}
             onTagsChange={setTags}
@@ -80,4 +77,26 @@ describe('MarketplaceTrigger', () => {
     ).not.toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'pluginTags.allTags' })).toHaveFocus()
   })
+
+  it('reflects the actual popover state on the trigger', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Popover>
+        <MarketplaceTrigger
+          selectedTagsLength={0}
+          tags={[]}
+          tagsMap={tagsMap}
+          onTagsChange={vi.fn()}
+        />
+      </Popover>,
+    )
+
+    const trigger = screen.getByRole('button', { name: 'pluginTags.allTags' })
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+
+    await user.click(trigger)
+
+    expect(trigger).toHaveAttribute('data-popup-open', '')
+  })
 })
diff --git a/web/app/components/plugins/marketplace/search-box/trigger/__tests__/tool-selector.spec.tsx b/web/app/components/plugins/marketplace/search-box/trigger/__tests__/tool-selector.spec.tsx
index de5caf322b0..2ffc989b363 100644
--- a/web/app/components/plugins/marketplace/search-box/trigger/__tests__/tool-selector.spec.tsx
+++ b/web/app/components/plugins/marketplace/search-box/trigger/__tests__/tool-selector.spec.tsx
@@ -18,7 +18,6 @@ describe('ToolSelectorTrigger', () => {
       <Popover>
         <ToolSelectorTrigger
           selectedTagsLength={0}
-          open={false}
           tags={[]}
           tagsMap={tagsMap}
           onTagsChange={vi.fn()}
@@ -38,7 +37,6 @@ describe('ToolSelectorTrigger', () => {
       <Popover>
         <ToolSelectorTrigger
           selectedTagsLength={3}
-          open
           tags={['agent', 'rag', 'search']}
           tagsMap={tagsMap}
           onTagsChange={vi.fn()}
@@ -61,7 +59,6 @@ describe('ToolSelectorTrigger', () => {
       <Popover>
         <ToolSelectorTrigger
           selectedTagsLength={0}
-          open={false}
           tags={[]}
           tagsMap={tagsMap}
           onTagsChange={vi.fn()}
@@ -71,12 +68,14 @@ describe('ToolSelectorTrigger', () => {
     )
 
     const trigger = screen.getByRole('button', { name: 'pluginTags.allTags' })
+    expect(trigger).not.toHaveAttribute('data-popup-open')
     await user.tab()
     expect(trigger).toHaveFocus()
 
     await user.keyboard('{Enter}')
 
     expect(screen.getByText('Tag options')).toBeInTheDocument()
+    expect(trigger).toHaveAttribute('data-popup-open', '')
   })
 
   it('keeps clear as a separate action from the popover trigger', async () => {
@@ -87,7 +86,6 @@ describe('ToolSelectorTrigger', () => {
         <Popover>
           <ToolSelectorTrigger
             selectedTagsLength={tags.length}
-            open={false}
             tags={tags}
             tagsMap={tagsMap}
             onTagsChange={setTags}
diff --git a/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx b/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
index 2448a3f95f2..ec001dbea50 100644
--- a/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
+++ b/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
@@ -7,7 +7,6 @@ import { useTranslation } from '#i18n'
 
 type MarketplaceTriggerProps = {
   selectedTagsLength: number
-  open: boolean
   tags: string[]
   tagsMap: Record<string, Tag>
   onTagsChange: (tags: string[]) => void
@@ -15,7 +14,6 @@ type MarketplaceTriggerProps = {
 
 function MarketplaceTrigger({
   selectedTagsLength,
-  open,
   tags,
   tagsMap,
   onTagsChange,
@@ -48,7 +46,7 @@ function MarketplaceTrigger({
               'h-8 justify-start px-2 py-1 text-text-tertiary focus-visible:ring-inset',
               !!selectedTagsLength &&
                 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg pr-8 shadow-xs shadow-shadow-shadow-3',
-              open && !selectedTagsLength && 'bg-state-base-hover',
+              !selectedTagsLength && 'data-popup-open:bg-state-base-hover',
             )}
           >
             <span className="p-0.5">
diff --git a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
index e5e1cc45906..ed1c4de07a5 100644
--- a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
+++ b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
@@ -7,7 +7,6 @@ import { useTranslation } from '#i18n'
 
 type ToolSelectorTriggerProps = {
   selectedTagsLength: number
-  open: boolean
   tags: string[]
   tagsMap: Record<string, Tag>
   onTagsChange: (tags: string[]) => void
@@ -15,7 +14,6 @@ type ToolSelectorTriggerProps = {
 
 function ToolSelectorTrigger({
   selectedTagsLength,
-  open,
   tags,
   tagsMap,
   onTagsChange,
@@ -49,7 +47,7 @@ function ToolSelectorTrigger({
               !selectedTagsLength && 'size-7 min-h-0 justify-center p-0',
               !!selectedTagsLength &&
                 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg py-0.5 pr-7 pl-1 shadow-xs shadow-shadow-shadow-3',
-              open && !selectedTagsLength && 'bg-state-base-hover',
+              !selectedTagsLength && 'data-popup-open:bg-state-base-hover',
             )}
           >
             <span className={cn('shrink-0', !!selectedTagsLength && 'p-0.5')}>
diff --git a/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx
index 9b3f4b72dc7..2d1069dccad 100644
--- a/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx
@@ -188,7 +188,7 @@ describe('Authorized Component', () => {
       expect(screen.getByRole('button'))!.toBeInTheDocument()
     })
 
-    it('should render with custom trigger when renderTrigger is provided', () => {
+    it('should render a custom trigger from the actual popover state', () => {
       const pluginPayload = createPluginPayload()
       const credentials = [createCredential()]
 
@@ -203,8 +203,14 @@ describe('Authorized Component', () => {
         { wrapper: createWrapper() },
       )
 
-      expect(screen.getByTestId('custom-trigger'))!.toBeInTheDocument()
+      const trigger = screen.getByTestId('popover-trigger')
+      expect(trigger).not.toHaveAttribute('data-popup-open')
       expect(screen.getByText('Closed'))!.toBeInTheDocument()
+
+      fireEvent.click(screen.getByTestId('custom-trigger'))
+
+      expect(trigger).toHaveAttribute('data-popup-open', '')
+      expect(screen.getByText('Open')).toBeInTheDocument()
     })
 
     it('should show singular authorization text for 1 credential', () => {
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index 8ecc69b7421..7ce0b4182da 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -207,16 +207,16 @@ const Authorized = ({
     <>
       <Popover open={mergedIsOpen} onOpenChange={setMergedIsOpen}>
         <PopoverTrigger
-          render={
-            <div className={triggerPopupSameWidth ? 'w-full' : 'inline-block'}>
+          render={(props, state) => (
+            <div
+              {...props}
+              className={cn(triggerPopupSameWidth ? 'w-full' : 'inline-block', props.className)}
+            >
               {renderTrigger ? (
-                renderTrigger(mergedIsOpen)
+                renderTrigger(state.open)
               ) : (
                 <Button
-                  className={cn(
-                    'w-full',
-                    mergedIsOpen && 'bg-components-button-secondary-bg-hover',
-                  )}
+                  className={cn('w-full', state.open && 'bg-components-button-secondary-bg-hover')}
                 >
                   <StatusDot
                     className="mr-2"
@@ -233,7 +233,7 @@ const Authorized = ({
                 </Button>
               )}
             </div>
-          }
+          )}
         />
         <PopoverContent
           placement={placement}
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx
index 4c15abbd11f..617ef659904 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx
@@ -120,7 +120,12 @@ describe('AppSelector', () => {
 
     renderWithQueryClient(<AppSelector onSelect={onSelect} />)
 
-    fireEvent.click(screen.getByRole('button', { name: 'app.appSelector.label' }))
+    const trigger = screen.getByRole('button', { name: 'app.appSelector.label' })
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+
+    fireEvent.click(trigger)
+
+    expect(trigger).toHaveAttribute('data-popup-open', '')
     expect(screen.getByText('app.appSelector.label')).toBeInTheDocument()
 
     fireEvent.click(screen.getByRole('combobox', { name: 'app.appSelector.label' }))
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
index f36b68c8064..053ece8afae 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
@@ -2,6 +2,7 @@
 
 import type { Placement } from '@langgenius/dify-ui/popover'
 import type { App } from '@/types/app'
+import { cn } from '@langgenius/dify-ui/cn'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query'
 import { useCallback, useMemo, useState } from 'react'
@@ -126,12 +127,16 @@ export function AppSelector({
       <PopoverTrigger
         aria-label={t(($) => $['appSelector.label'], { ns: 'app' })}
         disabled={disabled}
-        render={
-          <button type="button" className="block w-full border-0 bg-transparent p-0 text-left" />
-        }
-      >
-        <AppTrigger open={isShow} appDetail={currentAppInfo} />
-      </PopoverTrigger>
+        render={(props, state) => (
+          <button
+            {...props}
+            type="button"
+            className={cn('block w-full border-0 bg-transparent p-0 text-left', props.className)}
+          >
+            <AppTrigger open={state.open} appDetail={currentAppInfo} />
+          </button>
+        )}
+      />
       <PopoverContent
         placement={placement}
         sideOffset={offset}
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
index 56419558441..c5fb5894d5b 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
@@ -209,12 +209,12 @@ const DetailHeader = ({
                 pluginID={plugin_id}
                 currentVersion={version}
                 onSelect={handleVersionSelect}
-                trigger={
+                trigger={(open) => (
                   <Badge
                     className={cn(
                       'mx-1',
-                      versionPicker.isShow && 'bg-state-base-hover',
-                      (versionPicker.isShow || (canUpdatePlugin && isFromMarketplace)) &&
+                      open && 'bg-state-base-hover',
+                      (open || (canUpdatePlugin && isFromMarketplace)) &&
                         'hover:bg-state-base-hover',
                     )}
                     uppercase={false}
@@ -231,7 +231,7 @@ const DetailHeader = ({
                     }
                     hasRedCornerMark={hasNewVersion}
                   />
-                }
+                )}
               />
             )}
 
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/index.spec.tsx
index 06d103e6eaf..456f3495364 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/index.spec.tsx
@@ -343,7 +343,7 @@ describe('ModelParameterModal', () => {
       expect(screen.queryByTestId('trigger')).not.toBeInTheDocument()
     })
 
-    it('should call renderTrigger with correct props', () => {
+    it('should call renderTrigger with the actual popover state', async () => {
       // Arrange
       const renderTrigger = vi.fn().mockReturnValue(<div>Custom</div>)
       const value = { provider: 'openai', model: 'gpt-4' }
@@ -352,7 +352,8 @@ describe('ModelParameterModal', () => {
       // Act
       render(<ModelParameterModal {...props} />)
 
-      // Assert
+      const trigger = screen.getByText('Custom').closest('button')
+      expect(trigger).not.toHaveAttribute('data-popup-open')
       expect(renderTrigger).toHaveBeenCalledWith(
         expect.objectContaining({
           open: false,
@@ -360,6 +361,19 @@ describe('ModelParameterModal', () => {
           modelId: 'gpt-4',
         }),
       )
+
+      fireEvent.click(screen.getByText('Custom'))
+
+      await waitFor(() => {
+        expect(renderTrigger).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            open: true,
+            providerName: 'openai',
+            modelId: 'gpt-4',
+          }),
+        )
+      })
+      expect(trigger).toHaveAttribute('data-popup-open', '')
     })
 
     it('should not render portal content when closed', () => {
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
index 5929f4a455d..13e460071f4 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
@@ -224,14 +224,18 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
           </div>
         ) : (
           <PopoverTrigger
-            render={
+            render={(props, state) => (
               <button
+                {...props}
                 type="button"
-                className="block w-full border-none bg-transparent p-0 text-left text-inherit [font:inherit]"
+                className={cn(
+                  'block w-full border-none bg-transparent p-0 text-left text-inherit [font:inherit]',
+                  props.className,
+                )}
               >
                 {renderTrigger ? (
                   renderTrigger({
-                    open,
+                    open: state.open,
                     currentProvider,
                     currentModel,
                     providerName: value?.provider,
@@ -249,7 +253,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                   />
                 )}
               </button>
-            }
+            )}
           />
         )}
         <PopoverContent
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx
index 30c652434a3..758909fffeb 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/__tests__/selector-entry.spec.tsx
@@ -31,9 +31,28 @@ vi.mock('@langgenius/dify-ui/popover', async () => {
     return <PopoverContext.Provider value={{ open, setOpen }}>{children}</PopoverContext.Provider>
   }
 
-  const PopoverTrigger = ({ render }: { render: React.ReactNode }) => {
+  type TriggerProps = React.HTMLAttributes<HTMLElement> & {
+    'data-popup-open'?: string
+    'data-testid'?: string
+  }
+
+  const PopoverTrigger = ({
+    render,
+  }: {
+    render:
+      | React.ReactNode
+      | ((props: TriggerProps, state: { open: boolean }) => React.ReactElement)
+  }) => {
     const { open, setOpen } = React.useContext(PopoverContext)
-    return <div onClick={() => setOpen(!open)}>{render}</div>
+    const props: TriggerProps = {
+      'data-testid': 'popover-trigger',
+      'data-popup-open': open ? '' : undefined,
+      onClick: () => setOpen(!open),
+    }
+
+    if (typeof render === 'function') return render(props, { open })
+
+    return <div {...props}>{render}</div>
   }
 
   const PopoverContent = ({ children }: { children: React.ReactNode }) => {
@@ -112,8 +131,12 @@ describe('SubscriptionSelectorEntry', () => {
   it('should render placeholder when open without selection', () => {
     render(<SubscriptionSelectorEntry selectedId={undefined} onSelect={vi.fn()} />)
 
+    const trigger = screen.getByTestId('popover-trigger')
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+
     fireEvent.click(screen.getByRole('button'))
 
+    expect(trigger).toHaveAttribute('data-popup-open', '')
     expect(screen.getByText('pluginTrigger.subscription.selectPlaceholder')).toBeInTheDocument()
   })
 
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
index 9760e65c182..73d183f65d2 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
@@ -106,11 +106,11 @@ export const SubscriptionSelectorEntry = ({
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger
-        render={
-          <div>
-            <SubscriptionTriggerButton selectedId={selectedId} isOpen={isOpen} />
+        render={(props, state) => (
+          <div {...props}>
+            <SubscriptionTriggerButton selectedId={selectedId} isOpen={state.open} />
           </div>
-        }
+        )}
       />
       <PopoverContent
         placement="bottom-start"
diff --git a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
index cf0a3300a05..6707d385661 100644
--- a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
@@ -109,9 +109,17 @@ vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
       onClick,
       render,
     }: {
-      children: React.ReactNode
+      children?: React.ReactNode
       onClick?: React.MouseEventHandler<HTMLElement>
-      render?: React.ReactElement
+      render?:
+        | React.ReactElement
+        | ((
+            props: React.HTMLAttributes<HTMLElement> & {
+              'data-testid'?: string
+              'data-popup-open'?: string
+            },
+            state: { open: boolean },
+          ) => React.ReactElement)
     }) => {
       const { isOpen, setOpen } = useDropdownMenuContext()
       const handleClick = (e: React.MouseEvent<HTMLElement>) => {
@@ -119,6 +127,16 @@ vi.mock('@langgenius/dify-ui/dropdown-menu', async () => {
         setOpen(!isOpen)
       }
 
+      if (typeof render === 'function')
+        return render(
+          {
+            'data-testid': 'dropdown-trigger',
+            'data-popup-open': isOpen ? '' : undefined,
+            onClick: handleClick,
+          },
+          { open: isOpen },
+        )
+
       if (render)
         return React.cloneElement(
           render,
@@ -243,10 +261,12 @@ describe('InstallPluginDropdown', () => {
     expect(screen.getByTestId('arrow-down-icon')).toHaveClass('ml-1', 'size-4')
     expect(trigger).toHaveClass('custom-trigger')
     expect(trigger).toHaveAttribute('data-variant', 'primary')
+    expect(trigger).not.toHaveAttribute('data-popup-open')
 
     fireEvent.click(trigger)
 
     expect(trigger).toHaveClass('custom-open')
+    expect(trigger).toHaveAttribute('data-popup-open', '')
     expect(screen.getByTestId('dropdown-content')).toHaveClass('custom-popup')
   })
 
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 7373efed4b5..f1b5b63c255 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -160,8 +160,9 @@ const InstallPluginDropdown = ({
           accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
         />
         <DropdownMenuTrigger
-          render={
+          render={(props, state) => (
             <Button
+              {...props}
               variant={triggerVariant}
               disabled={disabled}
               title={buttonLabel}
@@ -169,19 +170,18 @@ const InstallPluginDropdown = ({
               className={cn(
                 'size-full p-2',
                 triggerClassName,
-                !disabled && isMenuOpen && triggerOpenClassName,
+                state.open && triggerOpenClassName,
+                props.className,
               )}
-            />
-          }
-        >
-          <>
-            <RiAddCircleFill className="size-4 shrink-0" />
-            <span className={cn(showTriggerArrow ? 'pl-1' : 'min-w-0 flex-1 px-0.5 text-left')}>
-              {buttonLabel}
-            </span>
-            {showTriggerArrow && <RiArrowDownSLine className="ml-1 size-4" />}
-          </>
-        </DropdownMenuTrigger>
+            >
+              <RiAddCircleFill className="size-4 shrink-0" />
+              <span className={cn(showTriggerArrow ? 'pl-1' : 'min-w-0 flex-1 px-0.5 text-left')}>
+                {buttonLabel}
+              </span>
+              {showTriggerArrow && <RiArrowDownSLine className="ml-1 size-4" />}
+            </Button>
+          )}
+        />
         <DropdownMenuContent
           placement="bottom-start"
           sideOffset={4}
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
index 58847c634d2..4f29fec31b2 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@@ -125,23 +125,28 @@ const PluginTasks = ({
       <DropdownMenu open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger
           nativeButton={false}
-          render={<div className={canOpenMenu ? 'cursor-pointer' : 'cursor-default'} />}
+          render={(props, state) => (
+            <div
+              {...props}
+              className={cn('cursor-pointer data-disabled:cursor-default', props.className)}
+            >
+              <TaskStatusIndicator
+                tip={tip}
+                isInstalling={isInstalling}
+                isInstallingWithSuccess={isInstallingWithSuccess}
+                isInstallingWithError={isInstallingWithError}
+                isSuccess={isSuccess}
+                isFailed={isFailed}
+                isOpen={state.open}
+                successPluginsLength={successPluginsLength}
+                runningPluginsLength={runningPluginsLength}
+                totalPluginsLength={totalPluginsLength}
+                onClick={() => {}}
+              />
+            </div>
+          )}
           disabled={!canOpenMenu}
-        >
-          <TaskStatusIndicator
-            tip={tip}
-            isInstalling={isInstalling}
-            isInstallingWithSuccess={isInstallingWithSuccess}
-            isInstallingWithError={isInstallingWithError}
-            isSuccess={isSuccess}
-            isFailed={isFailed}
-            isOpen={open}
-            successPluginsLength={successPluginsLength}
-            runningPluginsLength={runningPluginsLength}
-            totalPluginsLength={totalPluginsLength}
-            onClick={() => {}}
-          />
-        </DropdownMenuTrigger>
+        />
         <DropdownMenuContent
           placement={dropdownPlacement}
           sideOffset={4}
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
index ea81677eb7b..e27c4ccabbb 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
@@ -172,21 +172,17 @@ vi.mock('@/app/components/base/date-and-time-picker/time-picker', () => ({
     onChange: (v: unknown) => void
     onClear: () => void
     title?: string
-    renderTrigger: (params: {
-      inputElem: React.ReactNode
-      onClick: () => void
-      isOpen: boolean
-    }) => React.ReactNode
+    renderTrigger: (
+      props: React.HTMLAttributes<HTMLElement>,
+      state: { open: boolean },
+      params: { inputElem: React.ReactNode; onClick: () => void },
+    ) => React.ReactNode
   }) => {
     const inputElem = <span data-testid="time-input">{value.format('HH:mm')}</span>
 
     return (
       <div data-testid="time-picker">
-        {renderTrigger({
-          inputElem,
-          onClick: () => {},
-          isOpen: false,
-        })}
+        {renderTrigger({}, { open: false }, { inputElem, onClick: () => {} })}
         <div data-testid="time-picker-dropdown">
           <button
             data-testid="time-picker-set"
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index acac3d89dda..00d1110f286 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -1,7 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import type { AutoUpdateConfig } from './types'
-import type { TriggerParams } from '@/app/components/base/date-and-time-picker/types'
+import type {
+  TimePickerProps,
+  TriggerParams,
+} from '@/app/components/base/date-and-time-picker/types'
 import { cn } from '@langgenius/dify-ui/cn'
 import { SegmentedControl, SegmentedControlItem } from '@langgenius/dify-ui/segmented-control'
 import { RiTimeLine } from '@remixicon/react'
@@ -138,19 +141,26 @@ const AutoUpdateSetting: FC<Props> = ({ payload, onChange }) => {
     [payload, onChange],
   )
 
-  const renderTimePickerTrigger = useCallback(
-    ({ inputElem, onClick, isOpen }: TriggerParams) => {
+  const renderTimePickerTrigger = useCallback<NonNullable<TimePickerProps['renderTrigger']>>(
+    (props, state, { inputElem, onClick }: TriggerParams) => {
       return (
         <button
+          {...props}
           type="button"
-          className="group flex h-8 w-40 cursor-pointer items-center justify-between rounded-lg border-none bg-components-input-bg-normal px-2 text-left hover:bg-state-base-hover-alt focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
-          onClick={onClick}
+          className={cn(
+            'group flex h-8 w-40 cursor-pointer items-center justify-between rounded-lg border-none bg-components-input-bg-normal px-2 text-left hover:bg-state-base-hover-alt focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden',
+            props.className,
+          )}
+          onClick={(event) => {
+            onClick(event)
+            props.onClick?.(event)
+          }}
         >
           <div className="flex w-0 grow items-center gap-x-1">
             <RiTimeLine
               className={cn(
                 'size-4 shrink-0 text-text-tertiary',
-                isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
+                state.open ? 'text-text-secondary' : 'group-hover:text-text-secondary',
               )}
             />
             {inputElem}
diff --git a/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx b/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx
index 1a9c9db8947..52b961458bd 100644
--- a/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/update-plugin/__tests__/index.spec.tsx
@@ -905,7 +905,7 @@ describe('update-plugin', () => {
       onShowChange: vi.fn(),
       pluginID: 'test-plugin-id',
       currentVersion: '1.0.0',
-      trigger: <span>Select Version</span>,
+      trigger: () => <span>Select Version</span>,
       onSelect: vi.fn(),
     }
 
@@ -1136,7 +1136,7 @@ describe('update-plugin', () => {
             onShowChange: vi.fn(),
             pluginID: 'test',
             currentVersion: '1.0.0',
-            trigger: <span>Select</span>,
+            trigger: () => <span>Select</span>,
             onSelect: vi.fn(),
           }}
         />,
diff --git a/web/app/components/plugins/update-plugin/__tests__/plugin-version-picker.spec.tsx b/web/app/components/plugins/update-plugin/__tests__/plugin-version-picker.spec.tsx
index 9259166b2a1..eac9fbadb88 100644
--- a/web/app/components/plugins/update-plugin/__tests__/plugin-version-picker.spec.tsx
+++ b/web/app/components/plugins/update-plugin/__tests__/plugin-version-picker.spec.tsx
@@ -50,7 +50,7 @@ describe('PluginVersionPicker', () => {
         onShowChange={vi.fn()}
         pluginID="plugin-1"
         currentVersion="2.0.0"
-        trigger={<span>trigger</span>}
+        trigger={() => <span>trigger</span>}
         onSelect={vi.fn()}
       />,
     )
@@ -61,6 +61,23 @@ describe('PluginVersionPicker', () => {
     expect(screen.getByText('CURRENT')).toBeInTheDocument()
   })
 
+  it('passes Base trigger state and props through the preserved button root', () => {
+    render(
+      <PluginVersionPicker
+        isShow
+        onShowChange={vi.fn()}
+        pluginID="plugin-1"
+        currentVersion="2.0.0"
+        trigger={(open) => <span>{open ? 'open trigger' : 'closed trigger'}</span>}
+        onSelect={vi.fn()}
+      />,
+    )
+
+    const trigger = screen.getByRole('button', { name: 'open trigger' })
+    expect(trigger).toHaveAttribute('data-popup-open', '')
+    expect(trigger).toHaveClass('cursor-pointer')
+  })
+
   it('renders figma-aligned version rows', () => {
     render(
       <PluginVersionPicker
@@ -68,7 +85,7 @@ describe('PluginVersionPicker', () => {
         onShowChange={vi.fn()}
         pluginID="plugin-1"
         currentVersion="2.0.0"
-        trigger={<span>trigger</span>}
+        trigger={() => <span>trigger</span>}
         onSelect={vi.fn()}
       />,
     )
@@ -98,7 +115,7 @@ describe('PluginVersionPicker', () => {
         onShowChange={onShowChange}
         pluginID="plugin-1"
         currentVersion="2.0.0"
-        trigger={<span>trigger</span>}
+        trigger={() => <span>trigger</span>}
         onSelect={onSelect}
       />,
     )
@@ -122,7 +139,7 @@ describe('PluginVersionPicker', () => {
         onShowChange={vi.fn()}
         pluginID="plugin-1"
         currentVersion="2.0.0"
-        trigger={<span>trigger</span>}
+        trigger={() => <span>trigger</span>}
         onSelect={onSelect}
       />,
     )
diff --git a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
index 9afad71cce1..c2c286f8273 100644
--- a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
+++ b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
@@ -17,7 +17,7 @@ type Props = Readonly<{
   onShowChange: (isShow: boolean) => void
   pluginID: string
   currentVersion: string
-  trigger: React.ReactNode
+  trigger: (open: boolean) => React.ReactNode
   placement?: Placement
   sideOffset?: number
   alignOffset?: number
@@ -76,10 +76,19 @@ const PluginVersionPicker: FC<Props> = ({
     >
       <PopoverTrigger
         disabled={disabled}
-        className={cn('inline-flex cursor-pointer items-center', disabled && 'cursor-default')}
-      >
-        {trigger}
-      </PopoverTrigger>
+        render={(props, state) => (
+          <button
+            {...props}
+            type="button"
+            className={cn(
+              'inline-flex cursor-pointer items-center data-disabled:cursor-default',
+              props.className,
+            )}
+          >
+            {trigger(state.open)}
+          </button>
+        )}
+      />
 
       <PopoverContent
         placement={placement}
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
index 5fdc343a8c4..f8d1280eef5 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-selection-panel.tsx
@@ -52,7 +52,7 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
           BlockEnum.TriggerWebhook,
           BlockEnum.TriggerPlugin,
         ]}
-        trigger={() => (
+        trigger={
           <StartNodeOption
             icon={
               <div className="flex h-9 w-9 items-center justify-center rounded-[10px] border-[0.5px] border-transparent bg-util-colors-blue-brand-blue-brand-500 p-2">
@@ -63,7 +63,7 @@ const StartNodeSelectionPanel: FC<StartNodeSelectionPanelProps> = ({
             description={t(($) => $['onboarding.triggerDescription'], { ns: 'workflow' })}
             onClick={() => setShowTriggerSelector(true)}
           />
-        )}
+        }
       />
     </div>
   )
diff --git a/web/app/components/workflow/block-selector/__tests__/index.spec.tsx b/web/app/components/workflow/block-selector/__tests__/index.spec.tsx
index 3df1535d286..8c3fea6a174 100644
--- a/web/app/components/workflow/block-selector/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/block-selector/__tests__/index.spec.tsx
@@ -107,8 +107,10 @@ describe('BlockSelector', () => {
         onSelect={onSelect}
         blocks={[createBlock(BlockEnum.LLM, 'LLM'), createBlock(BlockEnum.End, 'End')]}
         availableBlocksTypes={[BlockEnum.LLM, BlockEnum.End]}
-        trigger={(open) => (
-          <button type="button">{open ? 'selector-open' : 'selector-closed'}</button>
+        trigger={(props, state) => (
+          <button {...props} type="button">
+            {state.open ? 'selector-open' : 'selector-closed'}
+          </button>
         )}
       />,
     )
@@ -155,8 +157,10 @@ describe('BlockSelector', () => {
         blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
         availableBlocksTypes={[BlockEnum.LLM, BlockEnum.Start]}
         showStartTab
-        trigger={(open) => (
-          <button type="button">{open ? 'selector-open' : 'selector-closed'}</button>
+        trigger={(props, state) => (
+          <button {...props} type="button">
+            {state.open ? 'selector-open' : 'selector-closed'}
+          </button>
         )}
       />,
     )
@@ -192,7 +196,7 @@ describe('BlockSelector', () => {
         blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
         availableBlocksTypes={[BlockEnum.LLM, BlockEnum.Start]}
         showStartTab
-        trigger={() => <button type="button">selector-open</button>}
+        trigger={<button type="button">selector-open</button>}
       />,
     )
 
@@ -218,8 +222,10 @@ describe('BlockSelector', () => {
         blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
         availableBlocksTypes={[BlockEnum.LLM, BlockEnum.Start]}
         showStartTab
-        trigger={(open) => (
-          <button type="button">{open ? 'selector-open' : 'selector-closed'}</button>
+        trigger={(props, state) => (
+          <button {...props} type="button">
+            {state.open ? 'selector-open' : 'selector-closed'}
+          </button>
         )}
       />,
     )
@@ -255,8 +261,10 @@ describe('BlockSelector', () => {
         onSelect={vi.fn()}
         blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
         availableBlocksTypes={[BlockEnum.LLM]}
-        trigger={(open) => (
-          <button type="button">{open ? 'selector-open' : 'selector-closed'}</button>
+        trigger={(props, state) => (
+          <button {...props} type="button">
+            {state.open ? 'selector-open' : 'selector-closed'}
+          </button>
         )}
       />,
     )
@@ -287,7 +295,7 @@ describe('BlockSelector', () => {
           onOpenChange={setOpen}
           onSelect={vi.fn()}
           blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
-          trigger={() => <button type="button">selector-trigger</button>}
+          trigger={<button type="button">selector-trigger</button>}
         />
       )
     }
@@ -314,7 +322,7 @@ describe('BlockSelector', () => {
       <BlockSelector
         onSelect={vi.fn()}
         blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
-        trigger={() => <button type="button">selector-trigger</button>}
+        trigger={<button type="button">selector-trigger</button>}
       />,
     )
 
@@ -339,11 +347,11 @@ describe('BlockSelector', () => {
         onSelect={vi.fn()}
         blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
         availableBlocksTypes={[BlockEnum.LLM]}
-        trigger={() => (
+        trigger={
           <button type="button" onClick={onTriggerClick}>
             open-selector
           </button>
-        )}
+        }
       />,
     )
 
@@ -369,7 +377,7 @@ describe('BlockSelector', () => {
         onSelect={vi.fn()}
         blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
         availableBlocksTypes={[BlockEnum.LLM]}
-        trigger={() => <ForwardingButtonTrigger />}
+        trigger={<ForwardingButtonTrigger />}
       />,
     )
 
@@ -388,7 +396,7 @@ describe('BlockSelector', () => {
         onSelect={vi.fn()}
         blocks={[createBlock(BlockEnum.LLM, 'LLM')]}
         availableBlocksTypes={[BlockEnum.LLM]}
-        trigger={() => <Button variant="primary">open-shared-button-trigger</Button>}
+        trigger={<Button variant="primary">open-shared-button-trigger</Button>}
       />,
     )
 
diff --git a/web/app/components/workflow/block-selector/index.tsx b/web/app/components/workflow/block-selector/index.tsx
index 15a11c87171..308d5f1b5f1 100644
--- a/web/app/components/workflow/block-selector/index.tsx
+++ b/web/app/components/workflow/block-selector/index.tsx
@@ -1,5 +1,5 @@
-import type { Placement } from '@langgenius/dify-ui/popover'
-import type { CSSProperties, KeyboardEvent, MouseEventHandler, ReactElement } from 'react'
+import type { Placement, PopoverTriggerProps } from '@langgenius/dify-ui/popover'
+import type { CSSProperties, KeyboardEvent, MouseEventHandler } from 'react'
 import type {
   CommonNodeType,
   NodeDefault,
@@ -32,13 +32,13 @@ export type BlockSelectorProps = {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   onSelect: OnSelectBlock
-  trigger?: (open: boolean) => ReactElement
+  trigger?: NonNullable<PopoverTriggerProps['render']>
   triggerTooltip?: string
   placement?: Placement
   sideOffset?: number
   alignOffset?: number
   triggerStyle?: CSSProperties
-  triggerClassName?: (open: boolean) => string
+  triggerClassName?: string
   triggerAriaLabel?: string
   popupClassName?: string
   availableBlocksTypes?: BlockEnum[]
@@ -125,7 +125,7 @@ function BlockSelector({
     <PopoverTrigger
       aria-label={triggerAriaLabel}
       disabled={disabled}
-      render={trigger(open)}
+      render={trigger}
       onClick={handleTrigger}
     />
   ) : (
@@ -136,7 +136,7 @@ function BlockSelector({
         <Button
           variant="primary"
           size="small"
-          className={cn('z-10 size-4 rounded-full p-0', triggerClassName?.(open))}
+          className={cn('z-10 size-4 rounded-full p-0', triggerClassName)}
           style={triggerStyle}
         />
       }
diff --git a/web/app/components/workflow/block-selector/snippets/snippet-tags-filter.tsx b/web/app/components/workflow/block-selector/snippets/snippet-tags-filter.tsx
index 3619b19f8db..604214606d2 100644
--- a/web/app/components/workflow/block-selector/snippets/snippet-tags-filter.tsx
+++ b/web/app/components/workflow/block-selector/snippets/snippet-tags-filter.tsx
@@ -68,10 +68,11 @@ const SnippetTagsFilter = ({ embedded = false, value, onChange }: SnippetTagsFil
                 value.length > 0 &&
                 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg py-0.5 pr-1.5 pl-1 shadow-xs shadow-shadow-shadow-3',
               !embedded && 'hover:bg-components-input-bg-hover',
-              open &&
-                (embedded
-                  ? !value.length && 'bg-state-base-hover'
-                  : 'border-components-input-border-active bg-components-input-bg-active text-text-secondary'),
+              embedded &&
+                !value.length &&
+                'data-popup-open:bg-state-base-hover data-popup-open:hover:bg-components-button-ghost-bg-hover',
+              !embedded &&
+                'data-popup-open:border-components-input-border-active data-popup-open:bg-components-input-bg-active data-popup-open:text-text-secondary data-popup-open:hover:bg-components-input-bg-hover',
               value.length > 0 && 'text-text-secondary',
             )}
           >
diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
index f5803064c00..27028ee918d 100644
--- a/web/app/components/workflow/custom-edge.tsx
+++ b/web/app/components/workflow/custom-edge.tsx
@@ -147,7 +147,7 @@ const CustomEdge = ({
               nextNodeTargetHandle: targetHandleId || 'target',
             }}
             availableBlocksTypes={intersection(availablePrevBlocks, availableNextBlocks)}
-            triggerClassName={() => 'transition-transform hover:scale-150'}
+            triggerClassName="transition-transform hover:scale-150"
           />
         </div>
       </EdgeLabelRenderer>
diff --git a/web/app/components/workflow/header/checklist/index.tsx b/web/app/components/workflow/header/checklist/index.tsx
index 2b6511d5e8e..3d546f46672 100644
--- a/web/app/components/workflow/header/checklist/index.tsx
+++ b/web/app/components/workflow/header/checklist/index.tsx
@@ -59,12 +59,13 @@ const WorkflowChecklist = ({ disabled, showGoTo = true, onItemClick }: WorkflowC
   return (
     <Popover open={open} onOpenChange={(newOpen) => !disabled && setOpen(newOpen)}>
       <PopoverTrigger
+        disabled={disabled}
         render={
           <button
             type="button"
             className={cn(
               'group relative ml-0.5 flex size-7 items-center justify-center rounded-md border-none bg-transparent p-0',
-              disabled && 'cursor-not-allowed opacity-50',
+              'data-disabled:cursor-not-allowed data-disabled:opacity-50',
             )}
             disabled={disabled || undefined}
             aria-label={checklistLabel}
diff --git a/web/app/components/workflow/header/undo-redo.tsx b/web/app/components/workflow/header/undo-redo.tsx
index 90be74c86ef..7ac6310b8f1 100644
--- a/web/app/components/workflow/header/undo-redo.tsx
+++ b/web/app/components/workflow/header/undo-redo.tsx
@@ -38,8 +38,7 @@ function UndoRedo({ handleUndo, handleRedo }: UndoRedoProps) {
           focusableWhenDisabled
           className={cn(
             'size-8 p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-            (nodesReadOnly || buttonsDisabled.undo) &&
-              'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+            'data-disabled:cursor-not-allowed data-disabled:text-text-disabled data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled',
           )}
           onClick={handleUndo}
         >
@@ -56,8 +55,7 @@ function UndoRedo({ handleUndo, handleRedo }: UndoRedoProps) {
           focusableWhenDisabled
           className={cn(
             'size-8 p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-            (nodesReadOnly || buttonsDisabled.redo) &&
-              'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+            'data-disabled:cursor-not-allowed data-disabled:text-text-disabled data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled',
           )}
           onClick={handleRedo}
         >
diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx
index 0b242ae6f52..816d7e3a44a 100644
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@@ -164,8 +164,7 @@ const ViewWorkflowHistory = () => {
               aria-label={t(($) => $['changeHistory.title'], { ns: 'workflow' })}
               className={cn(
                 'size-8 p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-                nodesReadOnly &&
-                  'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+                'data-disabled:cursor-not-allowed data-disabled:text-text-disabled data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled',
               )}
               onClick={() => {
                 if (nodesReadOnly) return
diff --git a/web/app/components/workflow/node-actions-menu/__tests__/details.spec.tsx b/web/app/components/workflow/node-actions-menu/__tests__/details.spec.tsx
index 1bedad990da..03430534151 100644
--- a/web/app/components/workflow/node-actions-menu/__tests__/details.spec.tsx
+++ b/web/app/components/workflow/node-actions-menu/__tests__/details.spec.tsx
@@ -31,7 +31,7 @@ vi.mock('@/app/components/workflow/block-selector', () => ({
     isolateKeyboardEvents,
   }: any) => (
     <div>
-      <div>{trigger()}</div>
+      <div>{typeof trigger === 'function' ? trigger({}, { open: false }) : trigger}</div>
       <div>{`available:${(availableBlocksTypes || []).join(',')}`}</div>
       <div>{`show-start:${String(showStartTab)}`}</div>
       <div>{`ignore:${(ignoreNodeIds || []).join(',')}`}</div>
diff --git a/web/app/components/workflow/node-actions-menu/change-block-menu-trigger.tsx b/web/app/components/workflow/node-actions-menu/change-block-menu-trigger.tsx
index 51f60f4bbff..672e60afec1 100644
--- a/web/app/components/workflow/node-actions-menu/change-block-menu-trigger.tsx
+++ b/web/app/components/workflow/node-actions-menu/change-block-menu-trigger.tsx
@@ -60,21 +60,19 @@ export function ChangeBlockMenuTrigger({
     [handleNodeChange, nodeId, sourceHandle],
   )
 
-  const renderTrigger = useCallback(() => {
-    return (
-      <button
-        type="button"
-        className="mx-1 flex h-8 w-[calc(100%-8px)] cursor-pointer items-center rounded-lg border-0 bg-transparent px-2 text-left text-sm text-text-secondary outline-hidden select-none hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden"
-      >
-        {t(($) => $['panel.changeBlock'], { ns: 'workflow' })}
-      </button>
-    )
-  }, [t])
+  const triggerElement = (
+    <button
+      type="button"
+      className="mx-1 flex h-8 w-[calc(100%-8px)] cursor-pointer items-center rounded-lg border-0 bg-transparent px-2 text-left text-sm text-text-secondary outline-hidden select-none hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden"
+    >
+      {t(($) => $['panel.changeBlock'], { ns: 'workflow' })}
+    </button>
+  )
 
   return (
     <BlockSelector
       onSelect={handleSelect}
-      trigger={renderTrigger}
+      trigger={triggerElement}
       popupClassName="min-w-[240px]"
       availableBlocksTypes={availableNodes}
       showStartTab={showStartTab}
diff --git a/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx b/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx
index 17032d49034..31ff755bfcf 100644
--- a/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx
@@ -58,7 +58,7 @@ type BlockSelectorProps = {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   onSelect?: (type: BlockEnum, pluginDefaultValue?: { pluginId: string }) => void
-  triggerClassName?: (open: boolean) => string
+  triggerClassName?: string
 }
 
 vi.mock('reactflow', () => ({
@@ -83,7 +83,8 @@ vi.mock('@/app/components/workflow/block-selector', () => ({
     <div>
       <button
         type="button"
-        className={triggerClassName?.(open)}
+        className={triggerClassName}
+        data-popup-open={open ? '' : undefined}
         onClick={(e) => {
           e.stopPropagation()
           onOpenChange?.(!open)
@@ -214,14 +215,14 @@ describe('node-handle', () => {
 
       fireEvent.click(addNodeButton)
 
-      expect(addNodeButton).toHaveClass('opacity-100')
+      expect(addNodeButton).toHaveAttribute('data-popup-open')
       // Trigger stays pointer-events-none so it never steals mousedown from
       // the underlying React Flow handle (drag-to-connect must keep working).
       expect(addNodeButton).toHaveClass('pointer-events-none')
 
       fireEvent.click(handle)
 
-      expect(addNodeButton).toHaveClass('opacity-0')
+      expect(addNodeButton).not.toHaveAttribute('data-popup-open')
 
       fireEvent.click(getSelectNodeButton())
 
@@ -275,7 +276,7 @@ describe('node-handle', () => {
 
       fireEvent.click(addNodeButton)
 
-      expect(addNodeButton).toHaveClass('opacity-100')
+      expect(addNodeButton).toHaveAttribute('data-popup-open')
       expect(addNodeButton).toHaveClass('pointer-events-none')
 
       fireEvent.click(getSelectNodeButton())
@@ -293,7 +294,7 @@ describe('node-handle', () => {
 
       fireEvent.click(handle)
 
-      expect(addNodeButton).toHaveClass('opacity-0')
+      expect(addNodeButton).not.toHaveAttribute('data-popup-open')
     })
 
     it('should keep the source add trigger visible when the node is selected', () => {
@@ -323,7 +324,7 @@ describe('node-handle', () => {
 
       const addNodeButton = getAddNodeButton()
 
-      expect(addNodeButton).toHaveClass('opacity-100')
+      expect(addNodeButton).toHaveAttribute('data-popup-open')
       expect(addNodeButton).toHaveClass('pointer-events-none')
       expect(mockSetShouldAutoOpenStartNodeSelector).toHaveBeenCalledWith(false)
       expect(mockSetHasSelectedStartNode).toHaveBeenCalledWith(false)
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/_base/components/next-step/__tests__/index.spec.tsx
index 773568142c2..6298dd450a5 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/__tests__/index.spec.tsx
@@ -12,12 +12,8 @@ import { useNodesReadOnly } from '../../../../../hooks/use-workflow'
 import NextStep from '../index'
 
 vi.mock('@/app/components/workflow/block-selector', () => ({
-  default: ({ trigger }: { trigger: ((open: boolean) => ReactNode) | ReactNode }) => {
-    return (
-      <div data-testid="next-step-block-selector">
-        {typeof trigger === 'function' ? trigger(false) : trigger}
-      </div>
-    )
+  default: ({ trigger }: { trigger: ReactNode }) => {
+    return <div data-testid="next-step-block-selector">{trigger}</div>
   },
 }))
 
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx b/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
index bfec891cd70..6462a10c694 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/__tests__/operator.spec.tsx
@@ -81,15 +81,9 @@ vi.mock('@langgenius/dify-ui/button', () => ({
 }))
 
 vi.mock('@/app/components/workflow/block-selector', () => ({
-  default: ({
-    trigger,
-    onSelect,
-  }: {
-    trigger: ((open: boolean) => ReactNode) | ReactNode
-    onSelect: (type: BlockEnum) => void
-  }) => (
+  default: ({ trigger, onSelect }: { trigger: ReactNode; onSelect: (type: BlockEnum) => void }) => (
     <div>
-      {typeof trigger === 'function' ? trigger(false) : trigger}
+      {trigger}
       <button type="button" onClick={() => onSelect(BlockEnum.HttpRequest)}>
         select-http
       </button>
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
index e478f8ecd46..297872e5ad9 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
@@ -53,22 +53,17 @@ const Add = ({ nodeId, nodeData, sourceHandle, isParallel, isFailBranch }: AddPr
 
     return t(($) => $['panel.selectNextStep'], { ns: 'workflow' })
   }, [isFailBranch, isParallel, t])
-  const renderTrigger = useCallback(
-    (open: boolean) => {
-      return (
-        <Button
-          variant="ghost"
-          size="large"
-          className={`bg-dropzone-bg hover:bg-dropzone-bg-hover relative w-full justify-start rounded-lg border border-dashed border-divider-regular px-2 text-xs text-text-placeholder ${open && 'bg-components-dropzone-bg-alt!'} `}
-        >
-          <div className="mr-1.5 flex h-5 w-5 items-center justify-center rounded-[5px] bg-background-default-dimmed">
-            <RiAddLine aria-hidden className="size-3" />
-          </div>
-          <div className="flex items-center uppercase">{tip}</div>
-        </Button>
-      )
-    },
-    [nodesReadOnly, tip],
+  const triggerElement = (
+    <Button
+      variant="ghost"
+      size="large"
+      className="bg-dropzone-bg hover:bg-dropzone-bg-hover relative w-full justify-start rounded-lg border border-dashed border-divider-regular px-2 text-xs text-text-placeholder data-popup-open:bg-components-dropzone-bg-alt!"
+    >
+      <div className="mr-1.5 flex h-5 w-5 items-center justify-center rounded-[5px] bg-background-default-dimmed">
+        <RiAddLine aria-hidden className="size-3" />
+      </div>
+      <div className="flex items-center uppercase">{tip}</div>
+    </Button>
   )
 
   return (
@@ -83,7 +78,7 @@ const Add = ({ nodeId, nodeData, sourceHandle, isParallel, isFailBranch }: AddPr
       }}
       placement="top"
       sideOffset={0}
-      trigger={renderTrigger}
+      trigger={triggerElement}
       popupClassName="w-[328px]!"
       availableBlocksTypes={availableNextBlocks}
     />
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
index 2b1da42a8f8..5fb68bfbb29 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
@@ -35,13 +35,11 @@ const ChangeItem = ({ data, nodeId, sourceHandle }: ChangeItemProps) => {
     [nodeId, sourceHandle, handleNodeChange],
   )
 
-  const renderTrigger = useCallback(() => {
-    return (
-      <Button variant="ghost" size="medium" className="w-full justify-start px-2">
-        {t(($) => $['panel.change'], { ns: 'workflow' })}
-      </Button>
-    )
-  }, [t])
+  const triggerElement = (
+    <Button variant="ghost" size="medium" className="w-full justify-start px-2">
+      {t(($) => $['panel.change'], { ns: 'workflow' })}
+    </Button>
+  )
 
   return (
     <BlockSelector
@@ -49,7 +47,7 @@ const ChangeItem = ({ data, nodeId, sourceHandle }: ChangeItemProps) => {
       placement="top-end"
       sideOffset={6}
       alignOffset={8}
-      trigger={renderTrigger}
+      trigger={triggerElement}
       popupClassName="w-[328px]!"
       availableBlocksTypes={intersection(availablePrevBlocks, availableNextBlocks).filter(
         (item) => item !== nodeCatalogType,
diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 324ea9d7b0c..955e5eb2f87 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -106,12 +106,12 @@ export const NodeTargetHandle = memo(
                 nextNodeTargetHandle: handleId,
               }}
               placement="left"
-              triggerClassName={(open) => `
+              triggerClassName={`
                 absolute left-0 top-0 opacity-0 pointer-events-none transition-opacity duration-150
                 ${nodeSelectorClassName}
                 group-hover:opacity-100
                 ${data.selected && 'opacity-100'}
-                ${open && 'opacity-100'}
+                data-popup-open:opacity-100
               `}
               availableBlocksTypes={availablePrevBlocks}
             />
@@ -244,12 +244,12 @@ export const NodeSourceHandle = memo(
               prevNodeId: id,
               prevNodeSourceHandle: handleId,
             }}
-            triggerClassName={(open) => `
+            triggerClassName={`
               absolute top-0 left-0 opacity-0 pointer-events-none transition-opacity duration-150
               ${nodeSelectorClassName}
               group-hover:opacity-100
               ${data.selected && 'opacity-100'}
-              ${open && 'opacity-100'}
+              data-popup-open:opacity-100
             `}
             availableBlocksTypes={availableNextBlocks}
           />
diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
index 64857e8cb64..9df1e2d14a9 100644
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -123,9 +123,9 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
             })
             setIsShowUpdateModal(true)
           }}
-          trigger={
+          trigger={(open) => (
             <Badge
-              className={cn('mx-1 flex hover:bg-state-base-hover', isShow && 'bg-state-base-hover')}
+              className={cn('mx-1 flex hover:bg-state-base-hover', open && 'bg-state-base-hover')}
               uppercase={true}
               text={
                 <>
@@ -135,7 +135,7 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
               }
               hasRedCornerMark={true}
             />
-          }
+          )}
         />
       )}
     </div>
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index 5cc1a55800b..671115643d9 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -58,9 +58,7 @@ const OperationSelector: FC<OperationSelectorProps> = ({
         disabled={disabled}
         className={cn(
           'group flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 data-popup-open:bg-state-base-hover-alt',
-          disabled
-            ? 'cursor-not-allowed bg-components-input-bg-disabled!'
-            : 'cursor-pointer hover:bg-state-base-hover-alt',
+          'cursor-pointer hover:bg-state-base-hover-alt data-disabled:cursor-not-allowed data-disabled:bg-components-input-bg-disabled! data-disabled:hover:bg-components-input-bg-disabled!',
           className,
         )}
       >
diff --git a/web/app/components/workflow/nodes/data-source-empty/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/data-source-empty/__tests__/index.spec.tsx
index 5ff6179ec86..8bde043261a 100644
--- a/web/app/components/workflow/nodes/data-source-empty/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/nodes/data-source-empty/__tests__/index.spec.tsx
@@ -12,15 +12,9 @@ vi.mock('../hooks', () => ({
 }))
 
 vi.mock('@/app/components/workflow/block-selector', () => ({
-  default: ({
-    onSelect,
-    trigger,
-  }: {
-    onSelect: OnSelectBlock
-    trigger: ((open?: boolean) => ReactNode) | ReactNode
-  }) => (
+  default: ({ onSelect, trigger }: { onSelect: OnSelectBlock; trigger: ReactNode }) => (
     <div>
-      {typeof trigger === 'function' ? trigger(false) : trigger}
+      {trigger}
       <button
         type="button"
         onClick={() =>
diff --git a/web/app/components/workflow/nodes/data-source-empty/index.tsx b/web/app/components/workflow/nodes/data-source-empty/index.tsx
index 3e2b6261d0e..e163b3b6429 100644
--- a/web/app/components/workflow/nodes/data-source-empty/index.tsx
+++ b/web/app/components/workflow/nodes/data-source-empty/index.tsx
@@ -1,7 +1,7 @@
 import type { NodeProps } from 'reactflow'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { memo, useCallback } from 'react'
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import { TabType } from '@/app/components/workflow/block-selector/types'
@@ -11,14 +11,12 @@ const DataSourceEmptyNode = ({ id, data }: NodeProps) => {
   const { t } = useTranslation()
   const { handleReplaceNode } = useReplaceDataSourceNode(id)
 
-  const renderTrigger = useCallback(() => {
-    return (
-      <Button variant="primary" className="w-full">
-        <span aria-hidden className="mr-1 i-ri-add-line size-4" />
-        {t(($) => $['nodes.dataSource.add'], { ns: 'workflow' })}
-      </Button>
-    )
-  }, [t])
+  const triggerElement = (
+    <Button variant="primary" className="w-full">
+      <span aria-hidden className="mr-1 i-ri-add-line size-4" />
+      {t(($) => $['nodes.dataSource.add'], { ns: 'workflow' })}
+    </Button>
+  )
 
   return (
     <div
@@ -43,7 +41,7 @@ const DataSourceEmptyNode = ({ id, data }: NodeProps) => {
         <div className={cn('flex items-center rounded-t-2xl p-3')}>
           <BlockSelector
             onSelect={handleReplaceNode}
-            trigger={renderTrigger}
+            trigger={triggerElement}
             standalonePanel={TabType.Sources}
             popupClassName="w-[320px]"
             placement="bottom-start"
diff --git a/web/app/components/workflow/nodes/iteration/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/iteration/__tests__/integration.spec.tsx
index 1ccae5d382a..76a0712b8b4 100644
--- a/web/app/components/workflow/nodes/iteration/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/iteration/__tests__/integration.spec.tsx
@@ -42,13 +42,17 @@ vi.mock('@/app/components/workflow/block-selector', () => ({
     availableBlocksTypes = [],
     disabled,
   }: {
-    trigger?: (open: boolean) => ReactNode
+    trigger?:
+      | ReactNode
+      | ((props: React.HTMLAttributes<HTMLElement>, state: { open: boolean }) => ReactNode)
     onSelect?: (type: BlockEnum) => void
     availableBlocksTypes?: BlockEnum[]
     disabled?: boolean
   }) => (
     <div>
-      {trigger ? <div>{trigger(false)}</div> : null}
+      {trigger ? (
+        <div>{typeof trigger === 'function' ? trigger({}, { open: false }) : trigger}</div>
+      ) : null}
       <button
         type="button"
         disabled={disabled}
diff --git a/web/app/components/workflow/nodes/iteration/add-block.tsx b/web/app/components/workflow/nodes/iteration/add-block.tsx
index 3870cf1d5d3..e0c6c57a92d 100644
--- a/web/app/components/workflow/nodes/iteration/add-block.tsx
+++ b/web/app/components/workflow/nodes/iteration/add-block.tsx
@@ -1,7 +1,6 @@
 import type { IterationNodeType } from './types'
 import type { OnSelectBlock } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -37,20 +36,15 @@ const AddBlock = ({ iterationNodeData }: AddBlockProps) => {
     [handleNodeAdd, iterationNodeData.start_node_id],
   )
 
-  const renderTriggerElement = useCallback(
-    (open: boolean) => {
-      return (
-        <Button
-          variant="secondary"
-          size="medium"
-          className={cn('relative', open && 'bg-components-button-secondary-bg-hover')}
-        >
-          <RiAddLine aria-hidden className="mr-1 size-4" />
-          {t(($) => $['common.addBlock'], { ns: 'workflow' })}
-        </Button>
-      )
-    },
-    [nodesReadOnly, t],
+  const triggerElement = (
+    <Button
+      variant="secondary"
+      size="medium"
+      className="relative data-popup-open:bg-components-button-secondary-bg-hover"
+    >
+      <RiAddLine aria-hidden className="mr-1 size-4" />
+      {t(($) => $['common.addBlock'], { ns: 'workflow' })}
+    </Button>
   )
 
   return (
@@ -65,7 +59,7 @@ const AddBlock = ({ iterationNodeData }: AddBlockProps) => {
           prevNodeId: iterationNodeData.start_node_id,
           prevNodeSourceHandle: 'source',
         }}
-        trigger={renderTriggerElement}
+        trigger={triggerElement}
         popupClassName="min-w-[256px]!"
         availableBlocksTypes={availableNextBlocks}
       />
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
index 8c839b550a7..b67c0f03ff1 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
@@ -154,7 +154,7 @@ function SearchMethodRadioCard({
         disabled={readonly}
         className={cn(
           'relative flex w-full rounded-t-xl p-2 text-left outline-hidden focus-visible:ring-1 focus-visible:ring-components-input-border-active',
-          readonly ? 'cursor-not-allowed' : 'cursor-pointer',
+          'cursor-pointer data-disabled:cursor-not-allowed',
         )}
       >
         {getSearchMethodEffect(option.effectColor, isActive)}
@@ -205,7 +205,7 @@ function HybridSearchModeRadioCard({
           'w-full rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-3 text-left outline-hidden transition-colors',
           'data-checked:border-[1.5px] data-checked:bg-components-option-card-option-selected-bg',
           'focus-visible:ring-1 focus-visible:ring-components-input-border-active',
-          readonly ? 'cursor-not-allowed' : 'cursor-pointer hover:shadow-xs',
+          'cursor-pointer hover:shadow-xs data-disabled:cursor-not-allowed data-disabled:hover:shadow-none',
         )}
       >
         <div className="flex items-start gap-2">
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
index c95ee63fbea..31632773f96 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
@@ -1,4 +1,7 @@
-import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
+import type {
+  DatePickerProps,
+  TriggerProps,
+} from '@/app/components/base/date-and-time-picker/types'
 import { cn } from '@langgenius/dify-ui/cn'
 import { RiCalendarLine, RiCloseCircleFill } from '@remixicon/react'
 import { useQuery } from '@tanstack/react-query'
@@ -27,8 +30,8 @@ const ConditionDate = ({ value, onChange }: ConditionDateProps) => {
     [onChange],
   )
 
-  const renderTrigger = useCallback(
-    ({ handleClickTrigger }: TriggerProps) => {
+  const renderTrigger = useCallback<NonNullable<DatePickerProps['renderTrigger']>>(
+    (props, _state, { handleClickTrigger }: TriggerProps) => {
       const hasValue = Boolean(value)
       const triggerText = value
         ? dayjs(value * 1000)
@@ -37,7 +40,7 @@ const ConditionDate = ({ value, onChange }: ConditionDateProps) => {
         : t(($) => $['nodes.knowledgeRetrieval.metadata.panel.datePlaceholder'], { ns: 'workflow' })
 
       return (
-        <div className="group flex items-center">
+        <div {...props} className={cn('group flex items-center', props.className)}>
           <button
             type="button"
             className={cn(
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
index 2cf67518df9..dd68c3b1ea6 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
@@ -6,7 +6,6 @@ import type { ModelParameterModalProps } from '@/app/components/header/account-s
 import type { DataSet } from '@/models/datasets'
 import type { DatasetConfigs } from '@/models/debug'
 import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
@@ -129,7 +128,7 @@ const RetrievalConfig: FC<Props> = ({
             variant="ghost"
             size="small"
             disabled={readonly}
-            className={cn(rerankModalOpen && 'bg-components-button-ghost-bg-hover')}
+            className="data-popup-open:bg-components-button-ghost-bg-hover"
           >
             <RiEqualizer2Line className="mr-1 size-3.5" />
             {t(($) => $.retrievalSettings, { ns: 'dataset' })}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
index 63f9ea18cf1..8fc63f34b3b 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
@@ -76,10 +75,7 @@ const JsonImporter: FC<JsonImporterProps> = ({ onSubmit, updateBtnWidth }) => {
       <PopoverTrigger
         ref={importBtnRef}
         onClick={(e) => e.stopPropagation()}
-        className={cn(
-          'flex shrink-0 rounded-md px-1.5 py-1 system-xs-medium text-text-tertiary hover:bg-components-button-ghost-bg-hover',
-          open && 'bg-components-button-ghost-bg-hover',
-        )}
+        className="flex shrink-0 rounded-md px-1.5 py-1 system-xs-medium text-text-tertiary hover:bg-components-button-ghost-bg-hover data-popup-open:bg-components-button-ghost-bg-hover"
       >
         <span className="px-0.5">
           {t(($) => $['nodes.llm.jsonSchema.import'], { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
index 58a16024ede..a496bcd01d3 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
@@ -2,7 +2,6 @@ import type { FC } from 'react'
 import type { SchemaRoot } from '../../../types'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { CompletionParams, Model } from '@/types/app'
-import { cn } from '@langgenius/dify-ui/cn'
 import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
 import { toast } from '@langgenius/dify-ui/toast'
 import * as React from 'react'
@@ -146,10 +145,7 @@ const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({ onApply, crossAxisO
           <button
             type="button"
             onClick={handleTrigger}
-            className={cn(
-              'flex size-6 items-center justify-center rounded-md p-0.5 hover:bg-state-accent-hover',
-              open && 'bg-state-accent-active',
-            )}
+            className="flex size-6 items-center justify-center rounded-md p-0.5 hover:bg-state-accent-hover data-popup-open:bg-state-accent-active data-popup-open:hover:bg-state-accent-hover"
           >
             <SchemaGenerator />
           </button>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/__tests__/type-selector.spec.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/__tests__/type-selector.spec.tsx
new file mode 100644
index 00000000000..03b11571809
--- /dev/null
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/__tests__/type-selector.spec.tsx
@@ -0,0 +1,45 @@
+import type { TypeItem } from '../type-selector'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { Type } from '../../../../../types'
+import TypeSelector from '../type-selector'
+
+const items: TypeItem[] = [
+  { value: Type.string, text: 'String' },
+  { value: Type.number, text: 'Number' },
+]
+
+function StatefulTypeSelector() {
+  const [currentValue, setCurrentValue] = useState<Type>(Type.string)
+  return (
+    <TypeSelector
+      items={items}
+      currentValue={currentValue}
+      onSelect={(item) => setCurrentValue(item.value as Type)}
+    />
+  )
+}
+
+describe('TypeSelector', () => {
+  it('renders the check from Select item state and updates it after selection', async () => {
+    const user = userEvent.setup()
+    render(<StatefulTypeSelector />)
+
+    await user.click(screen.getByRole('combobox'))
+
+    const stringOption = screen.getByRole('option', { name: 'String' })
+    const numberOption = screen.getByRole('option', { name: 'Number' })
+    expect(stringOption).toHaveAttribute('data-selected')
+    expect(stringOption.querySelector('svg')).toBeInTheDocument()
+    expect(numberOption).not.toHaveAttribute('data-selected')
+    expect(numberOption.querySelector('svg')).not.toBeInTheDocument()
+
+    await user.click(numberOption)
+    await user.click(screen.getByRole('combobox'))
+
+    expect(screen.getByRole('option', { name: 'String' })).not.toHaveAttribute('data-selected')
+    expect(screen.getByRole('option', { name: 'Number' })).toHaveAttribute('data-selected')
+    expect(screen.getByRole('option', { name: 'Number' }).querySelector('svg')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
index 5d3f7edf529..7c2a9651620 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import type { ArrayType, Type } from '../../../../types'
-import { cn } from '@langgenius/dify-ui/cn'
 import {
   Select,
   SelectContent,
@@ -38,12 +37,7 @@ const TypeSelector: FC<TypeSelectorProps> = ({ items, currentValue, onSelect, po
         if (selected) onSelect(selected)
       }}
     >
-      <SelectTrigger
-        className={cn(
-          'h-auto w-auto rounded-[5px] bg-transparent p-0.5 pl-1 hover:bg-state-base-hover',
-          open && 'bg-state-base-hover',
-        )}
-      >
+      <SelectTrigger className="h-auto w-auto rounded-[5px] bg-transparent p-0.5 pl-1 hover:bg-state-base-hover data-popup-open:bg-state-base-hover">
         <SelectValue className="system-xs-medium text-text-tertiary" />
       </SelectTrigger>
       <SelectContent
@@ -52,22 +46,22 @@ const TypeSelector: FC<TypeSelectorProps> = ({ items, currentValue, onSelect, po
         popupClassName="w-40 rounded-xl border-[0.5px] p-1 shadow-lg shadow-shadow-shadow-5"
         listClassName="p-0"
       >
-        {items.map((item) => {
-          const isSelected = item.value === currentValue
-          return (
-            <SelectItem<Type | ArrayType>
-              key={item.value}
-              value={item.value}
-              className="gap-x-1 rounded-lg px-2 py-1"
-            >
-              <SelectItemText className="px-1 system-sm-medium text-text-secondary">
-                {item.text}
-              </SelectItemText>
-              {isSelected && <RiCheckLine className="size-4 text-text-accent" />}
-              <SelectItemIndicator className="hidden" />
-            </SelectItem>
-          )
-        })}
+        {items.map((item) => (
+          <SelectItem<Type | ArrayType>
+            key={item.value}
+            value={item.value}
+            className="gap-x-1 rounded-lg px-2 py-1"
+            render={(props, state) => (
+              <div {...props} className={props.className}>
+                <SelectItemText className="px-1 system-sm-medium text-text-secondary">
+                  {item.text}
+                </SelectItemText>
+                {state.selected && <RiCheckLine className="size-4 text-text-accent" />}
+                <SelectItemIndicator className="hidden" />
+              </div>
+            )}
+          />
+        ))}
       </SelectContent>
     </Select>
   )
diff --git a/web/app/components/workflow/nodes/loop/add-block.tsx b/web/app/components/workflow/nodes/loop/add-block.tsx
index ae761cf741d..1046a7121d1 100644
--- a/web/app/components/workflow/nodes/loop/add-block.tsx
+++ b/web/app/components/workflow/nodes/loop/add-block.tsx
@@ -1,7 +1,6 @@
 import type { LoopNodeType } from './types'
 import type { OnSelectBlock } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
 import { RiAddLine } from '@remixicon/react'
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -37,20 +36,15 @@ const AddBlock = ({ loopNodeData }: AddBlockProps) => {
     [handleNodeAdd, loopNodeData.start_node_id],
   )
 
-  const renderTriggerElement = useCallback(
-    (open: boolean) => {
-      return (
-        <Button
-          variant="secondary"
-          size="medium"
-          className={cn('relative', open && 'bg-components-button-secondary-bg-hover')}
-        >
-          <RiAddLine aria-hidden className="mr-1 size-4" />
-          {t(($) => $['common.addBlock'], { ns: 'workflow' })}
-        </Button>
-      )
-    },
-    [nodesReadOnly, t],
+  const triggerElement = (
+    <Button
+      variant="secondary"
+      size="medium"
+      className="relative data-popup-open:bg-components-button-secondary-bg-hover"
+    >
+      <RiAddLine aria-hidden className="mr-1 size-4" />
+      {t(($) => $['common.addBlock'], { ns: 'workflow' })}
+    </Button>
   )
 
   return (
@@ -65,7 +59,7 @@ const AddBlock = ({ loopNodeData }: AddBlockProps) => {
           prevNodeId: loopNodeData.start_node_id,
           prevNodeSourceHandle: 'source',
         }}
-        trigger={renderTriggerElement}
+        trigger={triggerElement}
         popupClassName="min-w-[256px]!"
         availableBlocksTypes={availableNextBlocks}
       />
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
index a4265c3589c..0334d73a4d8 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
@@ -8,7 +8,6 @@ import type {
 } from '@/app/components/workflow/block-selector/types'
 import type { BlockEnum } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -69,19 +68,14 @@ const ImportFromTool: FC<Props> = ({ onImport }) => {
     [buildInTools, customTools, language, onImport, workflowTools],
   )
 
-  const renderTrigger = useCallback(
-    (open: boolean) => {
-      return (
-        <Button
-          variant="ghost"
-          size="small"
-          className={cn('text-text-tertiary', open && 'bg-state-base-hover')}
-        >
-          {t(($) => $[`${i18nPrefix}.importFromTool`], { ns: 'workflow' })}
-        </Button>
-      )
-    },
-    [t],
+  const triggerElement = (
+    <Button
+      variant="ghost"
+      size="small"
+      className="text-text-tertiary data-popup-open:bg-state-base-hover data-popup-open:hover:bg-components-button-ghost-bg-hover"
+    >
+      {t(($) => $[`${i18nPrefix}.importFromTool`], { ns: 'workflow' })}
+    </Button>
   )
 
   return (
@@ -89,7 +83,7 @@ const ImportFromTool: FC<Props> = ({ onImport }) => {
       placement="bottom-end"
       sideOffset={4}
       alignOffset={52}
-      trigger={renderTrigger}
+      trigger={triggerElement}
       onSelect={handleSelectTool}
       standalonePanel={TabType.Tools}
     />
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/__tests__/index.spec.tsx
index f588b6acf43..c628024693f 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/__tests__/index.spec.tsx
@@ -52,8 +52,14 @@ describe('variable-assigner/add-variable', () => {
       />,
     )
 
-    const trigger = container.querySelector('div[class*="group/addvariable"]')
-    fireEvent.click(trigger as HTMLElement)
+    const triggerButton = container.querySelector('button')!
+    const triggerVisual = triggerButton.firstElementChild!
+    expect(triggerButton).not.toHaveAttribute('data-popup-open')
+
+    fireEvent.click(triggerButton)
+
+    expect(triggerButton).toHaveAttribute('data-popup-open', '')
+    expect(triggerVisual).toHaveClass('bg-primary-600!')
 
     expect(
       screen.getByText('workflow.nodes.variableAssigner.setAssignVariable'),
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
index ff546beffbf..1d8d7757d7c 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
@@ -34,26 +34,30 @@ const AddVariable = ({
     <div className={cn(open && 'flex!', variableAssignerNodeData.selected && 'flex!')}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
-          render={
-            <button type="button" className="block border-none bg-transparent p-0">
+          render={(props, state) => (
+            <button
+              {...props}
+              type="button"
+              className={cn('block border-none bg-transparent p-0', props.className)}
+            >
               <div
                 className={cn(
                   'group/addvariable flex items-center justify-center',
                   'size-4 cursor-pointer',
                   'hover:rounded-full hover:bg-primary-600',
-                  open && 'rounded-full! bg-primary-600!',
+                  state.open && 'rounded-full! bg-primary-600!',
                 )}
               >
                 <Plus02
                   className={cn(
                     'size-2.5 text-text-tertiary',
                     'group-hover/addvariable:text-text-primary',
-                    open && 'text-text-primary!',
+                    state.open && 'text-text-primary!',
                   )}
                 />
               </div>
             </button>
-          }
+          )}
         />
         <PopoverContent
           placement="right"
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
index 6ebaf6edbf0..be73696ae4a 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
@@ -51,10 +51,7 @@ const ColorPicker = ({ theme, onThemeChange }: ColorPickerProps) => {
         render={
           <button
             type="button"
-            className={cn(
-              'flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-black/5',
-              open && 'bg-black/5',
-            )}
+            className="flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-black/5 data-popup-open:bg-black/5"
           >
             <div
               className={cn('size-4 rounded-full border border-black/5', THEME_MAP[theme]!.title)}
diff --git a/web/app/components/workflow/operator/__tests__/add-block.spec.tsx b/web/app/components/workflow/operator/__tests__/add-block.spec.tsx
index 29b08a4c0b9..c1d6f8c96b5 100644
--- a/web/app/components/workflow/operator/__tests__/add-block.spec.tsx
+++ b/web/app/components/workflow/operator/__tests__/add-block.spec.tsx
@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react'
+import type { ReactElement, ReactNode } from 'react'
+import type { BlockSelectorProps } from '../../block-selector'
 import { act, screen, waitFor } from '@testing-library/react'
 import { FlowType } from '@/types/common'
 import { createNode } from '../../__tests__/fixtures'
@@ -14,13 +15,14 @@ type BlockSelectorMockProps = {
   placement: string
   sideOffset: number
   alignOffset: number
-  trigger: (open: boolean) => ReactNode
+  trigger: NonNullable<BlockSelectorProps['trigger']>
   popupClassName: string
   availableBlocksTypes: BlockEnum[]
   showStartTab: boolean
   isolateKeyboardEvents?: boolean
   defaultActiveTab?: unknown
 }
+type BlockSelectorTriggerRender = Exclude<NonNullable<BlockSelectorProps['trigger']>, ReactElement>
 
 const {
   mockHandlePaneContextmenuCancel,
@@ -67,6 +69,7 @@ const {
 let latestBlockSelectorProps: BlockSelectorMockProps | null = null
 let mockNodesReadOnly = false
 let mockIsChatMode = false
+let mockTooltipOpen = false
 let mockFlowType: FlowType = FlowType.appFlow
 
 const mockAvailableNextBlocks = [BlockEnum.Answer, BlockEnum.Code]
@@ -84,7 +87,14 @@ const mockNodesMetaDataMap: Partial<Record<BlockEnum, { defaultValue: Record<str
 vi.mock('@/app/components/workflow/block-selector', () => ({
   default: (props: BlockSelectorMockProps) => {
     latestBlockSelectorProps = props
-    return <div data-testid="block-selector">{props.trigger(props.open)}</div>
+    const renderProps = {
+      'data-popup-open': mockTooltipOpen ? '' : undefined,
+    } as unknown as Parameters<BlockSelectorTriggerRender>[0]
+    const trigger =
+      typeof props.trigger === 'function'
+        ? props.trigger(renderProps, { open: props.open, disabled: props.disabled })
+        : props.trigger
+    return <div data-testid="block-selector">{trigger}</div>
   },
 }))
 
@@ -143,6 +153,7 @@ describe('AddBlock', () => {
     latestBlockSelectorProps = null
     mockNodesReadOnly = false
     mockIsChatMode = false
+    mockTooltipOpen = false
     mockFlowType = FlowType.appFlow
   })
 
@@ -216,6 +227,22 @@ describe('AddBlock', () => {
       trigger.focus()
       expect(trigger).toHaveFocus()
     })
+
+    it('should derive the active trigger style from Popover state instead of a composed Tooltip attribute', () => {
+      mockTooltipOpen = true
+
+      renderWithReactFlow([])
+
+      const trigger = screen.getByRole('button')
+      expect(trigger).toHaveAttribute('data-popup-open')
+      expect(trigger).not.toHaveClass('bg-state-accent-active')
+
+      act(() => {
+        latestBlockSelectorProps?.onOpenChange(true)
+      })
+
+      expect(trigger).toHaveClass('bg-state-accent-active')
+    })
   })
 
   // User interactions that bridge selector state and workflow state.
diff --git a/web/app/components/workflow/operator/add-block.tsx b/web/app/components/workflow/operator/add-block.tsx
index 171f095b865..46cbae5882f 100644
--- a/web/app/components/workflow/operator/add-block.tsx
+++ b/web/app/components/workflow/operator/add-block.tsx
@@ -22,12 +22,13 @@ import {
 } from '../utils'
 
 type AddBlockProps = {
-  renderTrigger?: (open: boolean) => ReactElement
+  renderTrigger?: BlockSelectorProps['trigger']
   sideOffset?: BlockSelectorProps['sideOffset']
   alignOffset?: BlockSelectorProps['alignOffset']
   onClose?: () => void
   isolateKeyboardEvents?: boolean
 }
+type BlockSelectorTriggerRender = Exclude<NonNullable<BlockSelectorProps['trigger']>, ReactElement>
 const AddBlock = ({
   renderTrigger,
   sideOffset,
@@ -84,18 +85,20 @@ const AddBlock = ({
     [store, workflowStore, nodesMetaDataMap],
   )
 
-  const renderTriggerElement = useCallback(
-    (open: boolean) => {
+  const renderTriggerElement = useCallback<BlockSelectorTriggerRender>(
+    (props, state) => {
       return (
         <Button
+          {...props}
           variant="ghost"
           size="small"
           disabled={nodesReadOnly}
           focusableWhenDisabled
           className={cn(
             'size-8 p-0 text-text-tertiary hover:text-text-secondary',
-            nodesReadOnly && 'text-text-disabled hover:bg-transparent hover:text-text-disabled',
-            open && 'bg-state-accent-active text-text-accent',
+            'data-disabled:text-text-disabled data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled',
+            state.open && 'bg-state-accent-active text-text-accent',
+            props.className,
           )}
         >
           <span aria-hidden className="i-ri-add-circle-fill size-4" />
diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
index 757f841847b..a47e3b8ec71 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -47,8 +47,7 @@ const Control = () => {
           focusableWhenDisabled
           className={cn(
             'ml-px size-8 p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-            nodesReadOnly &&
-              'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+            'data-disabled:cursor-not-allowed data-disabled:text-text-disabled data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled',
           )}
           onClick={addNote}
         >
@@ -71,8 +70,7 @@ const Control = () => {
             controlMode === ControlMode.Pointer
               ? 'bg-state-accent-active text-text-accent'
               : 'hover:bg-state-base-hover hover:text-text-secondary',
-            nodesReadOnly &&
-              'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+            'data-disabled:cursor-not-allowed data-disabled:text-text-disabled data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled',
           )}
           onClick={handleModePointer}
         >
@@ -94,8 +92,7 @@ const Control = () => {
             controlMode === ControlMode.Hand
               ? 'bg-state-accent-active text-text-accent'
               : 'hover:bg-state-base-hover hover:text-text-secondary',
-            nodesReadOnly &&
-              'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+            'data-disabled:cursor-not-allowed data-disabled:text-text-disabled data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled',
           )}
           onClick={handleModeHand}
         >
@@ -118,8 +115,7 @@ const Control = () => {
               controlMode === ControlMode.Comment
                 ? 'bg-state-accent-active text-text-accent'
                 : 'hover:bg-state-base-hover hover:text-text-secondary',
-              !canUseCommentMode &&
-                'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+              'data-disabled:cursor-not-allowed data-disabled:text-text-disabled data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled',
             )}
             onClick={handleModeComment}
           >
@@ -140,8 +136,7 @@ const Control = () => {
           focusableWhenDisabled
           className={cn(
             'size-8 p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-            nodesReadOnly &&
-              'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+            'data-disabled:cursor-not-allowed data-disabled:text-text-disabled data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled',
           )}
           onClick={handleLayout}
         >
diff --git a/web/app/components/workflow/operator/more-actions.tsx b/web/app/components/workflow/operator/more-actions.tsx
index 2ae242fbbb9..aa92f54bc07 100644
--- a/web/app/components/workflow/operator/more-actions.tsx
+++ b/web/app/components/workflow/operator/more-actions.tsx
@@ -166,8 +166,7 @@ function MoreActions() {
                 focusableWhenDisabled
                 className={cn(
                   'size-8 p-0 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-                  isReadOnly &&
-                    'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
+                  'data-disabled:cursor-not-allowed data-disabled:text-text-disabled data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled',
                 )}
               />
             }
diff --git a/web/app/components/workflow/panel-contextmenu.tsx b/web/app/components/workflow/panel-contextmenu.tsx
index 9ea0141a75d..de676700413 100644
--- a/web/app/components/workflow/panel-contextmenu.tsx
+++ b/web/app/components/workflow/panel-contextmenu.tsx
@@ -50,21 +50,19 @@ export function PanelContextmenu({ onClose }: { onClose: () => void }) {
   const canEditWorkflow = accessControl.canEdit && !workflowOperationReadOnly
   const shouldHideImportApp = flowType === FlowType.snippet || isSnippetCanvas()
 
-  const renderAddBlockTrigger = useCallback(() => {
-    return (
-      <ContextMenuItem
-        nativeButton
-        closeOnClick={false}
-        render={<button type="button" />}
-        className={cn(
-          'w-[calc(100%-8px)]',
-          'justify-between gap-4 border-0 bg-transparent px-3 text-left text-text-secondary',
-        )}
-      >
-        {t(($) => $['common.addBlock'], { ns: 'workflow' })}
-      </ContextMenuItem>
-    )
-  }, [t])
+  const addBlockTrigger = (
+    <ContextMenuItem
+      nativeButton
+      closeOnClick={false}
+      render={<button type="button" />}
+      className={cn(
+        'w-[calc(100%-8px)]',
+        'justify-between gap-4 border-0 bg-transparent px-3 text-left text-text-secondary',
+      )}
+    >
+      {t(($) => $['common.addBlock'], { ns: 'workflow' })}
+    </ContextMenuItem>
+  )
 
   const handleRunAction = useCallback(() => {
     if (isChatMode) handleWorkflowStartRunInChatflow()
@@ -80,7 +78,7 @@ export function PanelContextmenu({ onClose }: { onClose: () => void }) {
       <ContextMenuGroup>
         {canEditWorkflow && (
           <AddBlock
-            renderTrigger={renderAddBlockTrigger}
+            renderTrigger={addBlockTrigger}
             onClose={onClose}
             isolateKeyboardEvents
             sideOffset={-36}
diff --git a/web/features/agent-v2/agent-detail/logs/__tests__/source-picker.spec.tsx b/web/features/agent-v2/agent-detail/logs/__tests__/source-picker.spec.tsx
index c6395efeb9c..13003963200 100644
--- a/web/features/agent-v2/agent-detail/logs/__tests__/source-picker.spec.tsx
+++ b/web/features/agent-v2/agent-detail/logs/__tests__/source-picker.spec.tsx
@@ -38,6 +38,14 @@ const groups: AgentLogSourceGroupResponse[] = [
 ]
 
 describe('AgentLogSourcePicker', () => {
+  const commonProps = {
+    groups,
+    isLoading: false,
+    isError: false,
+    onRetry: vi.fn(),
+    onChange: vi.fn(),
+  }
+
   it('should filter sources across groups and only show empty when no source matches', async () => {
     const user = userEvent.setup()
 
@@ -74,4 +82,32 @@ describe('AgentLogSourcePicker', () => {
     expect(screen.queryByRole('option')).not.toBeInTheDocument()
     expect(screen.getByText('agentV2.agentDetail.logs.filters.source.empty')).toBeInTheDocument()
   })
+
+  it('should keep selected item state and checkbox icon DOM in sync', async () => {
+    const user = userEvent.setup()
+    const { rerender } = render(
+      <AgentLogSourcePicker {...commonProps} value={[sources.webapp.id]} />,
+    )
+
+    await user.click(
+      screen.getByRole('combobox', {
+        name: 'agentV2.agentDetail.logs.filters.source.label',
+      }),
+    )
+
+    const webappOption = screen.getByRole('option', { name: /Book Translation/ })
+    const workflowOption = screen.getByRole('option', { name: /SVG Logo Design/ })
+    expect(webappOption).toHaveClass('min-h-7', 'grid-cols-[1fr]', 'px-1', 'py-1')
+    expect(webappOption).toHaveAttribute('data-selected')
+    expect(webappOption.querySelector('.i-ri-check-line')).toBeInTheDocument()
+    expect(workflowOption).not.toHaveAttribute('data-selected')
+    expect(workflowOption.querySelector('.i-ri-check-line')).not.toBeInTheDocument()
+
+    rerender(<AgentLogSourcePicker {...commonProps} value={[sources.workflow.id]} />)
+
+    expect(webappOption).not.toHaveAttribute('data-selected')
+    expect(webappOption.querySelector('.i-ri-check-line')).not.toBeInTheDocument()
+    expect(workflowOption).toHaveAttribute('data-selected')
+    expect(workflowOption.querySelector('.i-ri-check-line')).toBeInTheDocument()
+  })
 })
diff --git a/web/features/agent-v2/agent-detail/logs/components/source-picker.tsx b/web/features/agent-v2/agent-detail/logs/components/source-picker.tsx
index db188fef3bf..9e27ecdb952 100644
--- a/web/features/agent-v2/agent-detail/logs/components/source-picker.tsx
+++ b/web/features/agent-v2/agent-detail/logs/components/source-picker.tsx
@@ -132,13 +132,16 @@ export function AgentLogSourcePicker({
                         key={source.id}
                         value={source}
                         className="min-h-7 grid-cols-[1fr] gap-0 px-1 py-1"
-                      >
-                        <ComboboxItemText className="flex min-w-0 items-center gap-2 px-0 system-sm-regular">
-                          <SourceCheckbox checked={value.includes(source.id)} />
-                          <LogSourceIcon source={source} />
-                          <span className="min-w-0 flex-1 truncate">{source.app_name}</span>
-                        </ComboboxItemText>
-                      </ComboboxItem>
+                        render={(props, state) => (
+                          <div {...props} className={props.className}>
+                            <ComboboxItemText className="flex min-w-0 items-center gap-2 px-0 system-sm-regular">
+                              <SourceCheckbox checked={state.selected} />
+                              <LogSourceIcon source={source} />
+                              <span className="min-w-0 flex-1 truncate">{source.app_name}</span>
+                            </ComboboxItemText>
+                          </div>
+                        )}
+                      />
                     )}
                   </ComboboxCollection>
                 </ComboboxGroup>
diff --git a/web/features/agent-v2/agent-detail/monitoring/time-range-picker.tsx b/web/features/agent-v2/agent-detail/monitoring/time-range-picker.tsx
index 8b4c5c209d1..858dea573bb 100644
--- a/web/features/agent-v2/agent-detail/monitoring/time-range-picker.tsx
+++ b/web/features/agent-v2/agent-detail/monitoring/time-range-picker.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { Dayjs } from 'dayjs'
-import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
+import type { DatePickerProps } from '@/app/components/base/date-and-time-picker/types'
 import type { I18nKeysWithPrefix } from '@/types/i18n'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
@@ -77,15 +77,23 @@ function DateRangePart({
 }) {
   const locale = useLocale()
 
-  const renderDate = ({ value, handleClickTrigger, isOpen }: TriggerProps) => (
+  const renderDate: DatePickerProps['renderTrigger'] = (
+    props,
+    _state,
+    { value, handleClickTrigger },
+  ) => (
     <div
+      {...props}
       role="button"
       tabIndex={0}
-      data-open={isOpen ? 'true' : undefined}
       className={cn(
-        'flex h-7 cursor-pointer items-center rounded-lg px-1 system-sm-regular text-components-input-text-filled hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden data-[open=true]:bg-state-base-hover',
+        'flex h-7 cursor-pointer items-center rounded-lg px-1 system-sm-regular text-components-input-text-filled hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden data-popup-open:bg-state-base-hover',
+        props.className,
       )}
-      onClick={handleClickTrigger}
+      onClick={(event) => {
+        handleClickTrigger(event)
+        props.onClick?.(event)
+      }}
       onKeyDown={(event) => {
         if (event.key !== 'Enter' && event.key !== ' ') return
 
diff --git a/web/features/deployments/detail/access/permissions/access-subject-selector/__tests__/add-button.spec.tsx b/web/features/deployments/detail/access/permissions/access-subject-selector/__tests__/add-button.spec.tsx
index 2fc9f23a49d..e1a76d0b74c 100644
--- a/web/features/deployments/detail/access/permissions/access-subject-selector/__tests__/add-button.spec.tsx
+++ b/web/features/deployments/detail/access/permissions/access-subject-selector/__tests__/add-button.spec.tsx
@@ -1,4 +1,4 @@
-import type { Subject } from '@/models/access-control'
+import type { AccessControlAccount, Subject } from '@/models/access-control'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -7,6 +7,14 @@ import { AccessSubjectAddButton } from '../add-button'
 
 const mockUseSearchAccessSubjects = vi.hoisted(() => vi.fn())
 
+vi.mock('@/context/account-state', async () => {
+  const { atom } = await import('jotai')
+
+  return {
+    userProfileAtom: atom({ email: 'current@example.com' }),
+  }
+})
+
 vi.mock('@/service/access-control/use-access-subjects', () => ({
   useSearchAccessSubjects: (...args: unknown[]) => mockUseSearchAccessSubjects(...args),
 }))
@@ -21,6 +29,20 @@ const groupSubject: Subject = {
   },
 }
 
+const member: AccessControlAccount = {
+  id: 'account-1',
+  name: 'Member One',
+  email: 'member@example.com',
+  avatar: '',
+  avatarUrl: '',
+}
+
+const memberSubject: Subject = {
+  subjectId: member.id,
+  subjectType: SubjectType.ACCOUNT,
+  accountData: member,
+}
+
 function lastSearchParams() {
   return mockUseSearchAccessSubjects.mock.calls.at(-1)?.[0] as { groupId?: string } | undefined
 }
@@ -33,7 +55,7 @@ describe('AccessSubjectAddButton', () => {
       data: {
         pages: [
           {
-            subjects: [groupSubject],
+            subjects: [groupSubject, memberSubject],
             hasMore: false,
           },
         ],
@@ -73,4 +95,40 @@ describe('AccessSubjectAddButton', () => {
       expect(lastSearchParams()?.groupId).toBeUndefined()
     })
   })
+
+  it('should keep group and member selected state in sync with checkbox icon DOM', async () => {
+    const user = userEvent.setup()
+    const group = groupSubject.groupData
+    const onChange = vi.fn()
+    const { rerender } = render(
+      <AccessSubjectAddButton selectedGroups={[group]} selectedMembers={[]} onChange={onChange} />,
+    )
+
+    await user.click(screen.getByRole('combobox', { name: 'common.operation.add' }))
+
+    const groupOption = await screen.findByRole('option', { name: /Group One/ })
+    const memberOption = screen.getByRole('option', { name: /Member One/ })
+    const expandButton = screen.getByRole('button', {
+      name: 'app.accessControlDialog.operateGroupAndMember.expand',
+    })
+    expect(groupOption).toHaveClass('mx-0', 'pl-2')
+    expect(memberOption).toHaveClass('mx-0', 'pl-2', 'pr-3')
+    expect(groupOption).toHaveAttribute('data-selected')
+    expect(groupOption.querySelector('.i-ri-check-line')).toBeInTheDocument()
+    expect(memberOption).not.toHaveAttribute('data-selected')
+    expect(memberOption.querySelector('.i-ri-check-line')).not.toBeInTheDocument()
+    expect(expandButton).toBeDisabled()
+
+    rerender(
+      <AccessSubjectAddButton selectedGroups={[]} selectedMembers={[member]} onChange={onChange} />,
+    )
+
+    await waitFor(() => {
+      expect(groupOption).not.toHaveAttribute('data-selected')
+      expect(groupOption.querySelector('.i-ri-check-line')).not.toBeInTheDocument()
+      expect(memberOption).toHaveAttribute('data-selected')
+      expect(memberOption.querySelector('.i-ri-check-line')).toBeInTheDocument()
+      expect(expandButton).not.toBeDisabled()
+    })
+  })
 })
diff --git a/web/features/deployments/detail/access/permissions/access-subject-selector/add-button.tsx b/web/features/deployments/detail/access/permissions/access-subject-selector/add-button.tsx
index 476fa78e72d..5a456a5b1e9 100644
--- a/web/features/deployments/detail/access/permissions/access-subject-selector/add-button.tsx
+++ b/web/features/deployments/detail/access/permissions/access-subject-selector/add-button.tsx
@@ -182,7 +182,6 @@ export function AccessSubjectAddButton({
                         key={getSubjectValue(subject)}
                         subject={subject}
                         selectedGroups={selectedGroups}
-                        selectedMembers={selectedMembers}
                         onExpandGroup={(group) => setBreadcrumbGroups([...breadcrumbGroups, group])}
                       />
                     )}
diff --git a/web/features/deployments/detail/access/permissions/access-subject-selector/subject-options.tsx b/web/features/deployments/detail/access/permissions/access-subject-selector/subject-options.tsx
index 0e919338b9e..50e5278e33d 100644
--- a/web/features/deployments/detail/access/permissions/access-subject-selector/subject-options.tsx
+++ b/web/features/deployments/detail/access/permissions/access-subject-selector/subject-options.tsx
@@ -20,12 +20,10 @@ import { SubjectType } from '@/models/access-control'
 export function SubjectItem({
   subject,
   selectedGroups,
-  selectedMembers,
   onExpandGroup,
 }: {
   subject: Subject
   selectedGroups: AccessControlGroup[]
-  selectedMembers: AccessControlAccount[]
   onExpandGroup: (group: AccessControlGroup) => void
 }) {
   if (subject.subjectType === SubjectType.GROUP) {
@@ -39,13 +37,7 @@ export function SubjectItem({
     )
   }
 
-  return (
-    <MemberItem
-      member={(subject as SubjectAccount).accountData}
-      subject={subject}
-      selectedMembers={selectedMembers}
-    />
-  )
+  return <MemberItem member={(subject as SubjectAccount).accountData} subject={subject} />
 }
 
 export function SelectedGroupsBreadCrumb({
@@ -122,19 +114,23 @@ function GroupItem({ group, subject, selectedGroups, onExpandGroup }: GroupItemP
   return (
     <div className="flex items-center gap-2 rounded-lg hover:bg-state-base-hover">
       <ComboboxBaseItem subject={subject}>
-        <SelectionBox checked={isChecked} />
-        <ComboboxItemText className="flex grow items-center px-0">
-          <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-            <div className="flex size-full items-center justify-center bg-(image:--color-access-app-icon-mask-bg)">
-              <span
-                className="i-ri-organization-chart h-3.5 w-3.5 text-components-avatar-shape-fill-stop-0"
-                aria-hidden="true"
-              />
-            </div>
-          </div>
-          <span className="mr-1 system-sm-medium text-text-secondary">{group.name}</span>
-          <span className="system-xs-regular text-text-tertiary">{group.groupSize}</span>
-        </ComboboxItemText>
+        {(selected) => (
+          <>
+            <SelectionBox checked={selected} />
+            <ComboboxItemText className="flex grow items-center px-0">
+              <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+                <div className="flex size-full items-center justify-center bg-(image:--color-access-app-icon-mask-bg)">
+                  <span
+                    className="i-ri-organization-chart h-3.5 w-3.5 text-components-avatar-shape-fill-stop-0"
+                    aria-hidden="true"
+                  />
+                </div>
+              </div>
+              <span className="mr-1 system-sm-medium text-text-secondary">{group.name}</span>
+              <span className="system-xs-regular text-text-tertiary">{group.groupSize}</span>
+            </ComboboxItemText>
+          </>
+        )}
       </ComboboxBaseItem>
       <Button
         size="small"
@@ -156,30 +152,32 @@ function GroupItem({ group, subject, selectedGroups, onExpandGroup }: GroupItemP
 type MemberItemProps = {
   member: AccessControlAccount
   subject: Subject
-  selectedMembers: AccessControlAccount[]
 }
 
-function MemberItem({ member, subject, selectedMembers }: MemberItemProps) {
+function MemberItem({ member, subject }: MemberItemProps) {
   const currentUser = useAtomValue(userProfileAtom)
   const { t } = useTranslation()
-  const isChecked = selectedMembers.some((selectedMember) => selectedMember.id === member.id)
   return (
     <ComboboxBaseItem subject={subject} className="pr-3">
-      <SelectionBox checked={isChecked} />
-      <ComboboxItemText className="flex grow items-center px-0">
-        <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
-          <div className="flex size-full items-center justify-center bg-(image:--color-access-app-icon-mask-bg)">
-            <Avatar size="xxs" avatar={null} name={member.name} />
-          </div>
-        </div>
-        <span className="mr-1 system-sm-medium text-text-secondary">{member.name}</span>
-        {currentUser.email === member.email && (
-          <span className="system-xs-regular text-text-tertiary">
-            ({t(($) => $.you, { ns: 'common' })})
-          </span>
-        )}
-      </ComboboxItemText>
-      <span className="system-xs-regular text-text-quaternary">{member.email}</span>
+      {(selected) => (
+        <>
+          <SelectionBox checked={selected} />
+          <ComboboxItemText className="flex grow items-center px-0">
+            <div className="mr-2 size-5 overflow-hidden rounded-full bg-components-icon-bg-blue-solid">
+              <div className="flex size-full items-center justify-center bg-(image:--color-access-app-icon-mask-bg)">
+                <Avatar size="xxs" avatar={null} name={member.name} />
+              </div>
+            </div>
+            <span className="mr-1 system-sm-medium text-text-secondary">{member.name}</span>
+            {currentUser.email === member.email && (
+              <span className="system-xs-regular text-text-tertiary">
+                ({t(($) => $.you, { ns: 'common' })})
+              </span>
+            )}
+          </ComboboxItemText>
+          <span className="system-xs-regular text-text-quaternary">{member.email}</span>
+        </>
+      )}
     </ComboboxBaseItem>
   )
 }
@@ -187,7 +185,7 @@ function MemberItem({ member, subject, selectedMembers }: MemberItemProps) {
 type ComboboxBaseItemProps = {
   className?: string
   subject: Subject
-  children: ReactNode
+  children: (selected: boolean) => ReactNode
 }
 
 function ComboboxBaseItem({ children, className, subject }: ComboboxBaseItemProps) {
@@ -198,9 +196,12 @@ function ComboboxBaseItem({ children, className, subject }: ComboboxBaseItemProp
         'mx-0 flex min-h-8 grow grid-cols-none items-center gap-2 rounded-lg p-1 pl-2',
         className,
       )}
-    >
-      {children}
-    </ComboboxItem>
+      render={(props, state) => (
+        <div {...props} className={props.className}>
+          {children(state.selected)}
+        </div>
+      )}
+    />
   )
 }
 
diff --git a/web/features/deployments/detail/instances/row-actions/__tests__/deployment-row-actions-menu.spec.tsx b/web/features/deployments/detail/instances/row-actions/__tests__/deployment-row-actions-menu.spec.tsx
new file mode 100644
index 00000000000..3f773bdb6b2
--- /dev/null
+++ b/web/features/deployments/detail/instances/row-actions/__tests__/deployment-row-actions-menu.spec.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { DeploymentActionsDropdown } from '../deployment-row-actions-menu'
+
+const commonProps = {
+  currentReleaseId: 'release-1',
+  deployActionLabel: 'Deploy',
+  isDeployFailed: false,
+  isDeploymentInProgress: false,
+  isUndeployed: false,
+  onDeploy: vi.fn(),
+  onRequestUndeploy: vi.fn(),
+  onViewError: vi.fn(),
+}
+
+describe('DeploymentActionsDropdown', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should keep disabled item state and action behavior in sync', async () => {
+    const user = userEvent.setup()
+    const { rerender } = render(
+      <DeploymentActionsDropdown {...commonProps} undeployActionDisabled />,
+    )
+
+    await user.click(screen.getByLabelText('deployments.deployTab.moreActions'))
+    const undeployItem = screen.getByRole('menuitem', {
+      name: 'deployments.deployTab.undeploy',
+    })
+    expect(undeployItem).toHaveAttribute('data-disabled')
+    expect(undeployItem).toHaveAttribute('aria-disabled', 'true')
+    expect(undeployItem).toHaveClass('data-disabled:cursor-not-allowed', 'data-disabled:opacity-60')
+
+    await user.click(undeployItem)
+    expect(commonProps.onRequestUndeploy).not.toHaveBeenCalled()
+
+    rerender(<DeploymentActionsDropdown {...commonProps} undeployActionDisabled={false} />)
+
+    expect(undeployItem).not.toHaveAttribute('data-disabled')
+    expect(undeployItem).toHaveAttribute('aria-disabled', 'false')
+
+    await user.click(undeployItem)
+    expect(commonProps.onRequestUndeploy).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/web/features/deployments/detail/instances/row-actions/deployment-row-actions-menu.tsx b/web/features/deployments/detail/instances/row-actions/deployment-row-actions-menu.tsx
index 7103fb6fd8c..9664b972314 100644
--- a/web/features/deployments/detail/instances/row-actions/deployment-row-actions-menu.tsx
+++ b/web/features/deployments/detail/instances/row-actions/deployment-row-actions-menu.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { cn } from '@langgenius/dify-ui/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -122,10 +121,7 @@ export function DeploymentActionsDropdown({
                 variant="destructive"
                 disabled={undeployActionDisabled}
                 aria-disabled={undeployActionDisabled}
-                className={cn(
-                  'gap-2 px-3',
-                  undeployActionDisabled && 'cursor-not-allowed opacity-60',
-                )}
+                className="gap-2 px-3 data-disabled:cursor-not-allowed data-disabled:opacity-60"
                 onClick={handleRequestUndeploy}
               >
                 <span aria-hidden className="i-ri-logout-box-line size-4 shrink-0" />
diff --git a/web/features/deployments/detail/releases/release-actions/__tests__/deploy-release-menu.spec.tsx b/web/features/deployments/detail/releases/release-actions/__tests__/deploy-release-menu.spec.tsx
index 5f7e6100cf7..e087dc05a3f 100644
--- a/web/features/deployments/detail/releases/release-actions/__tests__/deploy-release-menu.spec.tsx
+++ b/web/features/deployments/detail/releases/release-actions/__tests__/deploy-release-menu.spec.tsx
@@ -1,4 +1,4 @@
-import type { Release } from '@dify/contracts/enterprise/types.gen'
+import type { EnvironmentDeployment, Release } from '@dify/contracts/enterprise/types.gen'
 import { ReleaseSource } from '@dify/contracts/enterprise/types.gen'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
@@ -6,8 +6,7 @@ import { DeployReleaseMenu } from '../deploy-release-menu'
 
 const mockDeleteRelease = vi.hoisted(() => vi.fn())
 const mockExportReleaseDsl = vi.hoisted(() => vi.fn())
-
-vi.mock('@langgenius/dify-ui/dropdown-menu', () => import('@/__mocks__/base-ui-dropdown-menu'))
+const mockMutationState = vi.hoisted(() => ({ exportPending: false }))
 
 vi.mock('@tanstack/react-query', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@tanstack/react-query')>()
@@ -16,7 +15,7 @@ vi.mock('@tanstack/react-query', async (importOriginal) => {
     ...actual,
     useMutation: (options: { mutationKey?: readonly unknown[] }) => {
       if (options.mutationKey?.[0] === 'deployments')
-        return { isPending: false, mutate: mockExportReleaseDsl }
+        return { isPending: mockMutationState.exportPending, mutate: mockExportReleaseDsl }
 
       return { isPending: false, mutate: mockDeleteRelease }
     },
@@ -37,11 +36,34 @@ vi.mock('@/service/client', () => ({
 
 vi.mock('../state', async (importOriginal) => {
   const actual = await importOriginal<typeof import('../state')>()
+  const { RuntimeInstanceStatus } = await import('@dify/contracts/enterprise/types.gen')
   const { atom } = await import('jotai')
+  const currentRelease = {
+    id: 'release-1',
+    createdAt: '2026-01-01T00:00:00.000Z',
+  } as Release
+  const previousRelease = {
+    id: 'release-0',
+    createdAt: '2025-12-01T00:00:00.000Z',
+  } as Release
+  const environmentDeployments = {
+    environmentDeployments: [
+      {
+        environment: { id: 'env-current', displayName: 'Current' },
+        status: RuntimeInstanceStatus.RUNTIME_INSTANCE_STATUS_READY,
+        currentRelease,
+      },
+      {
+        environment: { id: 'env-available', displayName: 'Available' },
+        status: RuntimeInstanceStatus.RUNTIME_INSTANCE_STATUS_READY,
+        currentRelease: previousRelease,
+      },
+    ] as EnvironmentDeployment[],
+  }
 
   return {
     ...actual,
-    deployReleaseMenuEnvironmentDeploymentsAtom: atom(undefined),
+    deployReleaseMenuEnvironmentDeploymentsAtom: atom(environmentDeployments),
     deployReleaseMenuEnvironmentDeploymentsIsErrorAtom: atom(true),
     deployReleaseMenuEnvironmentDeploymentsIsLoadingAtom: atom(false),
     deployReleaseMenuAppInstanceNameAtom: atom('Deployment 1'),
@@ -86,6 +108,7 @@ function createRelease(): Release {
 describe('DeployReleaseMenu', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockMutationState.exportPending = false
   })
 
   it('should disable release deletion when deployment usage cannot be checked', () => {
@@ -97,10 +120,35 @@ describe('DeployReleaseMenu', () => {
     const deleteItem = screen.getByRole('menuitem', { name: 'deployments.versions.deleteRelease' })
 
     expect(deleteItem).toHaveAttribute('aria-disabled', 'true')
+    expect(deleteItem).toHaveAttribute('data-disabled')
+    expect(deleteItem).toHaveClass('data-disabled:cursor-not-allowed', 'data-disabled:opacity-60')
 
     fireEvent.click(deleteItem)
 
     expect(screen.queryByText('delete confirm')).not.toBeInTheDocument()
     expect(mockDeleteRelease).not.toHaveBeenCalled()
   })
+
+  it('should expose disabled state for exporting and unavailable environment actions', () => {
+    mockMutationState.exportPending = true
+    const release = createRelease()
+
+    render(<DeployReleaseMenu releaseId={release.id} releaseRows={[release]} />)
+
+    fireEvent.click(screen.getByLabelText('deployments.versions.moreActions'))
+
+    const exportItem = screen.getByRole('menuitem', { name: 'deployments.versions.exportingDsl' })
+    const currentEnvironmentItem = screen.getByRole('menuitem', {
+      name: /deployments\.versions\.currentOn/,
+    })
+    const availableEnvironmentItem = screen.getByRole('menuitem', {
+      name: /deployments\.versions\.(deployTo|rollbackTo)/,
+    })
+    expect(exportItem).toHaveAttribute('data-disabled')
+    expect(currentEnvironmentItem).toHaveAttribute('data-disabled')
+    expect(availableEnvironmentItem).not.toHaveAttribute('data-disabled')
+
+    fireEvent.click(exportItem)
+    expect(mockExportReleaseDsl).not.toHaveBeenCalled()
+  })
 })
diff --git a/web/features/deployments/detail/releases/release-actions/deploy-release-menu.tsx b/web/features/deployments/detail/releases/release-actions/deploy-release-menu.tsx
index bbfd7757733..bf8883977ee 100644
--- a/web/features/deployments/detail/releases/release-actions/deploy-release-menu.tsx
+++ b/web/features/deployments/detail/releases/release-actions/deploy-release-menu.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import type { Release } from '@dify/contracts/enterprise/types.gen'
-import { cn } from '@langgenius/dify-ui/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -161,7 +160,7 @@ function DeployReleaseMenuContent({ onDeleted }: { onDeleted?: () => void }) {
             <DropdownMenuItem
               disabled={isExportingDsl}
               aria-disabled={isExportingDsl}
-              className={cn('gap-2 px-3', isExportingDsl && 'cursor-not-allowed opacity-60')}
+              className="gap-2 px-3 data-disabled:cursor-not-allowed data-disabled:opacity-60"
               onClick={handleExportDsl}
             >
               <span
@@ -195,7 +194,7 @@ function DeployReleaseMenuContent({ onDeleted }: { onDeleted?: () => void }) {
                       <DropdownMenuItem
                         disabled={isDisabled}
                         aria-disabled={isDisabled}
-                        className={cn('gap-2 px-3', isDisabled && 'cursor-not-allowed opacity-60')}
+                        className="gap-2 px-3 data-disabled:cursor-not-allowed data-disabled:opacity-60"
                         onClick={() => {
                           if (isDisabled || !appInstanceId) return
                           setOpen(false)
@@ -219,10 +218,7 @@ function DeployReleaseMenuContent({ onDeleted }: { onDeleted?: () => void }) {
                 variant="destructive"
                 disabled={deleteActionDisabled}
                 aria-disabled={deleteActionDisabled}
-                className={cn(
-                  'gap-2 px-3',
-                  deleteActionDisabled && 'cursor-not-allowed opacity-60',
-                )}
+                className="gap-2 px-3 data-disabled:cursor-not-allowed data-disabled:opacity-60"
                 onClick={() => {
                   if (deleteActionDisabled) return
                   openDeleteReleaseDialog()
diff --git a/web/features/deployments/list/ui/__tests__/environment-filter.spec.tsx b/web/features/deployments/list/ui/__tests__/environment-filter.spec.tsx
new file mode 100644
index 00000000000..c4ef207c78c
--- /dev/null
+++ b/web/features/deployments/list/ui/__tests__/environment-filter.spec.tsx
@@ -0,0 +1,39 @@
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { renderWithNuqs } from '@/test/nuqs-testing'
+import { EnvironmentFilter } from '../environment-filter'
+
+vi.mock('../../state', async () => {
+  const { atom } = await import('jotai')
+  const { parseAsString } = await import('nuqs')
+  const allOption = { kind: 'all' as const, value: null }
+
+  return {
+    deploymentsListEnvironmentFilterOptionsAtom: atom([allOption]),
+    deploymentsListSelectedEnvironmentFilterOptionAtom: atom(allOption),
+    envFilterQueryState: parseAsString.withOptions({ history: 'push' }),
+  }
+})
+
+describe('EnvironmentFilter', () => {
+  it('should keep trigger open state, shadow variant, and arrow DOM in sync', async () => {
+    const user = userEvent.setup()
+    renderWithNuqs(<EnvironmentFilter />)
+
+    const trigger = screen.getByRole('button', { name: 'deployments.filter.allEnvs' })
+    const arrow = trigger.querySelector('.i-ri-arrow-down-s-line')
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+    expect(trigger).toHaveClass('data-popup-open:shadow-xs')
+    expect(arrow).not.toHaveClass('rotate-180')
+
+    await user.click(trigger)
+
+    expect(trigger).toHaveAttribute('data-popup-open')
+    expect(arrow).toHaveClass('rotate-180')
+
+    await user.click(trigger)
+
+    expect(trigger).not.toHaveAttribute('data-popup-open')
+    expect(arrow).not.toHaveClass('rotate-180')
+  })
+})
diff --git a/web/features/deployments/list/ui/environment-filter.tsx b/web/features/deployments/list/ui/environment-filter.tsx
index fedcb231ba6..ed15fec9ecd 100644
--- a/web/features/deployments/list/ui/environment-filter.tsx
+++ b/web/features/deployments/list/ui/environment-filter.tsx
@@ -52,8 +52,7 @@ export function EnvironmentFilter({ className }: { className?: string }) {
     <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger
         className={cn(
-          'flex h-8 max-w-full cursor-pointer items-center gap-1 rounded-lg border border-transparent bg-components-input-bg-normal px-2 text-left select-none',
-          open && 'shadow-xs',
+          'flex h-8 max-w-full cursor-pointer items-center gap-1 rounded-lg border border-transparent bg-components-input-bg-normal px-2 text-left select-none data-popup-open:shadow-xs',
           className,
         )}
       >