-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DropdownItem does not re-render to reflect updated language changes #3003
Comments
Please share a minimal reproducible project on stackblitz. It's hard to investigate just based on the above code. Not sure what lib you use for the lang logic, in general I think you should use a translation hook directly instead. |
I'm using context and hooks for handling language changes. However, the text in the action dropdown items in a table does not re-render immediately when the language is changed. It only updates when navigating to a different page. LanguageProvider: `"use client"; type LanguageContextType = { const LanguageContext = createContext<LanguageContextType | undefined>( export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ const loadTranslations = (lang: string) => { useEffect(() => { return ( export const useLanguage = (): LanguageContextType => { LanguageSwitcher: `import React from "react"; const LanguageSwitcher: React.FC = () => { return ( |
`"use client"; export default function UsersTableTemp({ const { translations } = useLanguage();
]); useEffect(() => {
}, [translations]); const statusOptions = [ const statusColorMap: Record<string, ChipProps["color"]> = { const INITIAL_VISIBLE_COLUMNS = [ const [filterValue, setFilterValue] = useState(""); useEffect(() => { const hasSearchFilter = Boolean(filterValue); const headerColumns = React.useMemo(() => {
}, [columns, visibleColumns, translations]); const filteredItems = React.useMemo(() => {
}, [applications, filterValue, statusFilter]); const pages = Math.ceil(filteredItems.length / rowsPerPage); const items = React.useMemo(() => {
}, [page, filteredItems, rowsPerPage]); const sortedItems = React.useMemo(() => { const handleDeleteEvent = async (eventId: string, eventObjectId: string) => {
}; function getDropdownItems(application: FlattenedApplication) {
} const renderCell = React.useCallback(
); const onNextPage = React.useCallback(() => { const onPreviousPage = React.useCallback(() => { const onRowsPerPageChange = React.useCallback( const onSearchChange = React.useCallback((value?: string) => { const onClear = React.useCallback(() => { const topContent = React.useMemo(() => { <Input isClearable className="w-full sm:max-w-[44%]" placeholder={translations.strings.search} startContent={} value={filterValue} onClear={() => onClear()} onValueChange={onSearchChange} /> <Button endContent={} variant="flat" > {translations.strings.status} {statusOptions.map((status) => ( {capitalize(status.name)} ))} <Button endContent={} variant="flat" > {translations.strings.columns} {dropdownColumns.map((column) => ( {capitalize(column.name)} ))} {/* {session && session.user.role === "admin" && ( <Button as={"a"} href="/add-application" color="primary" endContent={} > Add New )} */} {translations.strings.total} {applications.length}{" "} {translations.strings.event} 5 10 15 ); }, [ filterValue, statusFilter, visibleColumns, onSearchChange, onRowsPerPageChange, applications.length, hasSearchFilter, session, columns, ]); const bottomContent = React.useMemo(() => { {/* {selectedKeys === "all" ? "All items selected" : ${selectedKeys.size} of ${filteredItems.length} selected } */}<Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage} > {translations.strings.previous} <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage} > {translations.strings.next} ); }, [selectedKeys, items.length, page, pages, hasSearchFilter, columns]); if (status === "loading") { Loading... ; // or any other loading indicator} return ( I pass a function, {getDropdownItems(application)}, to obtain each dropdown item. Subsequently, I assigned getDropdownItems to a state variable and then used useEffect to invoke it, ensuring that the language within getDropdownItems changes along with the language switcher. Here's a closer look at the implementation: State Initialization: The state for the dropdown items is initialized based on the return value of getDropdownItems. useEffect Hook: This hook is triggered on language change and calls getDropdownItems to update the dropdown items state with the new language settings. Despite this setup, the items inside the under actions do not re-render when the language is switched. I'm puzzled about why the dropdown items are not responding to the language change, considering the state update mechanism and component re-render should be triggered by the useEffect hook or the dependency translations in "renderCell useCallback function". |
Link: |
The stackblitz environment is not running. Please double check. |
NextUI Version
@nextui-org/theme: 2.1.17
Describe the bug
Description
When switching languages, the text within DropdownItem components does not update or re-render to reflect the new language selections. This issue occurs consistently across various implementations where dynamic language switching is needed.
Version used:
"@nextui-org/button": "2.0.26",
"@nextui-org/code": "2.0.24",
"@nextui-org/input": "2.1.16",
"@nextui-org/kbd": "2.0.25",
"@nextui-org/link": "2.0.26",
"@nextui-org/navbar": "2.0.27",
"@nextui-org/react": "^2.2.9",
"@nextui-org/snippet": "2.0.30",
"@nextui-org/switch": "2.0.25",
"@nextui-org/system": "2.0.15",
"@nextui-org/theme": "2.1.17",
"@react-aria/ssr": "^3.8.0",
"@react-aria/visually-hidden": "^3.8.6",
"@types/node": "20.5.7",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.16",
"clsx": "^2.0.0",
"eslint": "8.48.0",
"eslint-config-next": "14.0.2",
"framer-motion": "^10.18.0",
"intl-messageformat": "^10.5.0",
"next": "14.0.2",
"next-auth": "^4.24.5",
"next-themes": "^0.2.1",
"postcss": "8.4.31",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^5.1.0",
"react-share": "^5.1.0",
"tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5",
"typescript": "5.0.4"
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
Create a Dropdown with multiple DropdownItem components, where the text is determined by a language state or context.
Change the language (e.g., from English to Spanish).
Observe that the DropdownItem texts do not update to the new language.
Expected behavior
The DropdownItem components should update and re-render with the new language texts when the language context or state changes.
Screenshots or Videos
Operating System Version
macOS
Browser
Chrome
The text was updated successfully, but these errors were encountered: