Skip to content

fix(dropdown): modify the responsive adaptation of the drop-down arrow in the mobile first template #3614

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 28, 2025
Merged

fix(dropdown): modify the responsive adaptation of the drop-down arrow in the mobile first template #3614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/renderless/src/dropdown/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,12 @@ export const api = ['state', 'handleMainButtonClick', 'hide', 'show', 'initDomOp
export const renderless = (
props: IDropdownProps,
{ reactive, watch, provide, onMounted, computed, onBeforeUnmount }: ISharedRenderlessParamHooks,
{ emit, parent, broadcast, vm, nextTick, mode, designConfig }: IDropdownRenderlessParamUtils
{ emit, parent, broadcast, vm, nextTick, mode, designConfig, useBreakpoint }: IDropdownRenderlessParamUtils
): IDropdownApi => {
const api = {} as IDropdownApi
const { current } = useBreakpoint()
const state: IDropdownState = reactive({
current,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Update the IDropdownState interface to include the current property.

The current property is added to the reactive state but is not defined in the IDropdownState interface. This may cause TypeScript compilation issues.

Please verify that the interface needs to be updated by checking the type definition file:

If the current property is missing from the interface, please add it:

export interface IDropdownState {
  visible: boolean
  timeout: null | NodeJS.Timeout
  focusing: false
  menuItems: NodeListOf<HTMLElement> | undefined | null | []
  menuItemsArray: HTMLElement[] | null
  triggerElm: HTMLElement | null
  dropdownElm: HTMLElement | null
  listId: string
  showIcon: boolean
  showSelfIcon: boolean
  designConfig: IDropdownRenderlessParamUtils['designConfig']
  trigger: 'click' | 'hover'
  visibleIsBoolean: boolean
+ current: string
}

🏁 Script executed:

#!/bin/bash
# Check if the IDropdownState interface includes the current property
rg -A 20 "interface IDropdownState" packages/renderless/types/dropdown.type.ts

Length of output: 692

Add current to the IDropdownState interface

The current property is being initialized in the reactive state (packages/renderless/src/dropdown/vue.ts) but is missing from the IDropdownState definition, which will lead to TypeScript errors.

Locations to update:

  • packages/renderless/types/dropdown.type.ts

Suggested diff:

 export interface IDropdownState {
   visible: boolean
   timeout: null | NodeJS.Timeout
   focusing: false
   menuItems: NodeListOf<HTMLElement> | undefined | null | []
   menuItemsArray: HTMLElement[] | null
   triggerElm: HTMLElement | null
   dropdownElm: HTMLElement | null
   listId: string
   showIcon: boolean
   showSelfIcon: boolean
   designConfig: IDropdownRenderlessParamUtils['designConfig']
   trigger: 'click' | 'hover'
   visibleIsBoolean: boolean
+  current: string
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
current,
// File: packages/renderless/types/dropdown.type.ts
export interface IDropdownState {
visible: boolean
timeout: null | NodeJS.Timeout
focusing: false
menuItems: NodeListOf<HTMLElement> | undefined | null | []
menuItemsArray: HTMLElement[] | null
triggerElm: HTMLElement | null
dropdownElm: HTMLElement | null
listId: string
showIcon: boolean
showSelfIcon: boolean
designConfig: IDropdownRenderlessParamUtils['designConfig']
trigger: 'click' | 'hover'
visibleIsBoolean: boolean
current: string
}
🤖 Prompt for AI Agents 
In packages/renderless/types/dropdown.type.ts near the definition of the
IDropdownState interface, add the missing property 'current' with the
appropriate type to match its initialization in
packages/renderless/src/dropdown/vue.ts line 53. This will align the interface
with the reactive state and prevent TypeScript errors.

visible: false,
timeout: null,
focusing: false,
Expand Down
11 changes: 7 additions & 4 deletions packages/vue/src/dropdown/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,8 +123,11 @@ export default defineComponent({

const defaultIcon = (
<span class="block text-[0]">
<icon-chevron-down class="sm:block hidden will-change-transform" />
<icon-arrow-bottom class="sm:hidden block will-change-transform" />
{state.current !== 'default' ? (
<icon-chevron-down class="sm:block hidden will-change-transform" />
) : (
<icon-arrow-bottom class="sm:hidden block will-change-transform" />
)}
</span>
)

Expand Down Expand Up @@ -160,8 +163,8 @@ export default defineComponent({
type === 'primary'
? '[&_svg]:fill-color-bg-1'
: state.visible
? 'active:border-color-border-focus text-color-text-primary active:text-color-brand-focus focus:border-color-border-focus focus:text-color-brand-focus'
: '[&_svg]:fill-color-icon-placeholder'
? 'active:border-color-border-focus text-color-text-primary active:text-color-brand-focus focus:border-color-border-focus focus:text-color-brand-focus'
: '[&_svg]:fill-color-icon-placeholder'
]}
reset-time={0}>
{defaultSlot}
Expand Down
Loading