LearnNewsExamplesServices
Frontmatter
id8941
titleFeat: Implement Neo.form.field.CountryFlagPicker
stateClosed
labels
enhancementai
assigneestobiu
createdAtFeb 1, 2026, 6:31 PM
updatedAtFeb 8, 2026, 4:53 PM
githubUrlhttps://github.com/neomjs/neo/issues/8941
authortobiu
commentsCount1
parentIssue8930
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtFeb 8, 2026, 4:53 PM

Feat: Implement Neo.form.field.CountryFlagPicker

Closed v12.0.0 enhancementai
tobiu
tobiu commented on Feb 1, 2026, 6:31 PM

Implement a specialized form field for selecting countries with visual flag indicators, following the pattern of Neo.form.field.Color.

Requirements:

  1. Base Class: Extend Neo.form.field.Country (or ComboBox).
  2. Input Display: Show the selected country's flag as a circular icon inside the input field (similar to the color indicator).
  3. List Items: Render the flag icon next to the country name in the dropdown list.
  4. Utility: Leverage the new src/util/CountryFlags.mjs for mapping names/codes to icon paths.
  5. Icons: Use the 'circle-flags' library (SVG) for the visual assets.

Acceptance Criteria:

  • Users can see the flag of the selected country in the input.
  • Users see flags in the picker dropdown.
  • Fallback to a default icon (e.g., globe) if no flag is found.
tobiu added the enhancement label on Feb 1, 2026, 6:31 PM
tobiu added the ai label on Feb 1, 2026, 6:31 PM
tobiu added parent issue #8930 on Feb 1, 2026, 6:31 PM
tobiu referenced in commit c901142 - "feat: Enhance Neo.form.field.Country with flags and DevRank integration (#8941)" on Feb 8, 2026, 4:38 PM
tobiu
tobiu Feb 8, 2026, 4:53 PM

Input from Gemini 3 Pro:

✦ I have enhanced the existing Neo.form.field.Country class instead of creating a new CountryFlagPicker widget.

Changes:

  1. src/form/field/Country.mjs:
    • Added a default store configuration in static config that uses CountryFlags.countries.
    • Set valueField to 'name' to match the store.
    • Enhanced afterSetValue to properly handle flag updates and support record objects.
    • Added pickerWidth and adjusted styling.
  2. src/list/Country.mjs:
    • Added baseCls and moved inline styles to SCSS.
    • Updated createItemContent to display country flags inline with the text.
  3. resources/scss/src/list/Country.scss:
    • Added styles for the country list items (flags and text capitalization).
  4. apps/devrank/view/ControlsContainer.mjs:
    • Integrated Neo.form.field.Country into the DevRank controls panel.

This approach avoids code duplication and leverages the existing class infrastructure. Use showFlags: true to enable the flag icons.

tobiu assigned to @tobiu on Feb 8, 2026, 4:53 PM
tobiu closed this issue on Feb 8, 2026, 4:53 PM