System Information
-
Strapi Version: 4.7.1
-
Operating System: Mac
-
Database: SQLite
-
Node Version: >=14.19.1 <=18.x.x
-
NPM Version: >=6.0.0
-
Yarn Version:
“strapi-plugin-navigation”: “^2.2.3”,
I enabled internationalization in Strapi and in the Navigation Plugin. Everything works fine, until when I change “Home” to Chinese characters and click the Save button, nothing happens, but when I add an English letter or a number in front of the Chinese characters, the Save button works again.
Single-type and collection work fine with internationalization.
How can I fix this? Thank you very much.
As you can see, I can’t click save when there is no letter or number in front of the Chinese characters.
Oooooo a validation bug, personally I’d just accept whatever the user inputs (within reason)
Speaking to the developer in my previous comment
Hi there! It’s now 2025, and I noticed this issue is still around. I’ve found a solution that works and I hope it helps someone out there!
By the way, here are the versions I used:
- Strapi version: 5.21.0
- Strapi-plugin-navigation version: 3.2.0
Here’s how to apply the fix:
- Navigate to the file:
src/index.ts
- Replace the content with the following code:
// import type { Core } from '@strapi/strapi';
export default {
/**
* An asynchronous register function that runs before
* your application is initialized.
*
* This gives you an opportunity to extend code.
*/
register(/* { strapi }: { strapi: Core.Strapi } */) {
},
/**
* An asynchronous bootstrap function that runs before
* your application gets started.
*
* This gives you an opportunity to set up your data model,
* run jobs, or perform some special logic.
*/
bootstrap({ strapi }) {
const navigationCommonService = strapi.plugin("navigation").service("common");
const originalGetSlug = navigationCommonService.getSlug;
const preprocess = (q) => encodeURIComponent(q);
navigationCommonService.getSlug = (data) => {
const query = data.query;
// Handle undefined, null, or empty query
if (!query || typeof query !== 'string') {
return originalGetSlug(data); // Pass the original data structure
}
const encodedString = preprocess(query);
// Create a new data object with the encoded query
const modifiedData = { ...data, query: encodedString };
return originalGetSlug(modifiedData);
};
},
};