Skip to content

fix: make react-select loading and no-options strings translatable - #8266

Open
faisalahammad wants to merge 1 commit into
impress-org:developfrom
faisalahammad:fix/8165-translatable-react-select-strings
Open

fix: make react-select loading and no-options strings translatable#8266
faisalahammad wants to merge 1 commit into
impress-org:developfrom
faisalahammad:fix/8165-translatable-react-select-strings

Conversation

@faisalahammad

@faisalahammad faisalahammad commented Jul 18, 2026

Copy link
Copy Markdown

Summary

The async Campaign filter dropdowns on the Donations (Select Campaign) and Donors (All Campaigns) admin list tables rendered react-select's hardcoded English defaults (Loading... and No options) because the shared AsyncFilter wrapper did not pass loadingMessage and noOptionsMessage. Both props are now passed through __() from @wordpress/i18n so they follow the active site language.

Fixes #8165

Changes

src/Views/Components/ListTable/CustomFilter/index.tsx

Before:

<AsyncPaginate
    inputId={`givewp-async-filter-${name}`}
    placeholder={placeholder}
    loadOptions={loadOptions}
    onChange={handleChange}
    value={selectedOption}
    isSearchable={isSearchable}
    isClearable={isClearable}
    mapOptionsForMenu={mapOptionsForMenu}
    className={`${styles.searchableSelect} ${styles.asyncSelect}`}
    classNamePrefix="searchableSelect"
    debounceTimeout={600}
/>

After:

<AsyncPaginate
    inputId={`givewp-async-filter-${name}`}
    placeholder={placeholder}
    loadOptions={loadOptions}
    onChange={handleChange}
    value={selectedOption}
    isSearchable={isSearchable}
    isClearable={isClearable}
    mapOptionsForMenu={mapOptionsForMenu}
    className={`${styles.searchableSelect} ${styles.asyncSelect}`}
    classNamePrefix="searchableSelect"
    debounceTimeout={600}
    loadingMessage={() => __('Loading…', 'give')}
    noOptionsMessage={() => __('No options', 'give')}
/>

Why: The Campaign dropdown on both list tables renders through this single AsyncFilter component (via the campaignselect filter type). Adding the two props here covers both pages with one change and matches the pattern already used in src/Admin/fields/AsyncSelectOption/index.tsx.

Testing

Test 1: Donations list, non-English locale

  1. Set site language to a non-en_US locale (e.g. Dutch nl_NL).
  2. Go to Donations > Donations.
  3. Open the Select Campaign filter dropdown.
  4. Observe the loading text while options load, and the empty text when no campaigns match.
    Result: both strings follow the active site language instead of English.

Test 2: Donors list, non-English locale

  1. Same locale setup as above.
  2. Go to Donations > Donors.
  3. Open the All Campaigns filter dropdown.
    Result: loading and empty strings are translated, no hardcoded English.

View with Codesmith Autofix with Codesmith
Need help on this PR? Tag /codesmith with what you need. Autofix is disabled.

The async Campaign filter dropdowns on the Donations and Donors admin
list tables rendered react-select's hardcoded English defaults
(Loading... and No options) because the shared AsyncFilter wrapper did
not pass loadingMessage and noOptionsMessage. Pass both through __()
from @wordpress/i18n so they follow the active site language.

Fixes impress-org#8165
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Two react-select strings are not translatable

1 participant