Fix/a.trim issue

[DSingh0304]

Why submit this pull request?

• Bugfix
• New feature provided
• Improve performance
• Backport patches

What changes will this PR take into?

This PR fixes a runtime error "a.trim is not a function" that occurs when viewing a route with a vars field in the detail page.

The issue was caused by the TagsInput component (from Mantine) receiving non-string values (arrays) in some edge cases. The Mantine TagsInput internally calls .trim() on each value, which fails when the value is not a string.

Changes made:

• Added a defensive check in src/components/form/TagInput.tsx to ensure the value passed to TagsInput is always an array of strings
• Non-string values are now filtered out before being passed to the component

Related issues

fix #3276

Checklist:

• Did you explain what problem does this PR solve? Or what new features have been added?
• Have you added corresponding test cases?
• Have you modified the corresponding document?
• Is this PR backward compatible? If it is not backward compatible, please discuss on the mailing list first

[Baoyuantop]

Hi @DSingh0304, could you add a test to fix this issue?

[DSingh0304]

Hi @DSingh0304, could you add a test to fix this issue?

Yes sure I will..

[DSingh0304]

Hi @DSingh0304, could you add a test to fix this issue?

The fix is defensive:

• It prevents crashes if corrupted data somehow reaches the frontend
• The existing e2e test routes.crud all fields.spec.ts already tests the vars field with valid data.
• Since APISIX API validates data strictly, invalid data can't be created via the API for e2e testing.
• The project doesn't have unit test infrastructure for component-level testing.

However, if you'd like me to add a test, I can create an e2e test that mocks the API response to simulate corrupted data reaching the frontend. This would demonstrate that the components handle invalid data gracefully, though it would deviate from the existing test pattern where all tests use real API calls for creation and deletion.