diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1e95fe5311..375be656fdc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,9 @@
## [`master`](https://github.com/elastic/eui/tree/master)
-No public interface changes since `29.3.0`.
+**Bug fixes**
+
+- Fixed `EuiFieldSearch` padding when `isClearable` but has no `value` ([#4089](https://github.com/elastic/eui/pull/4089))
+
## [`29.3.0`](https://github.com/elastic/eui/tree/v29.3.0)
diff --git a/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap b/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap
index 2a692824744..555296c356d 100644
--- a/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap
+++ b/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`EuiFieldSearch props append is rendered 1`] = `
>
@@ -49,13 +49,47 @@ exports[`EuiFieldSearch props fullWidth is rendered 1`] = `
>
`;
+exports[`EuiFieldSearch props isClearable is accepted 1`] = `
+
+
+
+
+
+`;
+
+exports[`EuiFieldSearch props isClearable is rendered when a value exists 1`] = `
+
+
+
+
+
+`;
+
exports[`EuiFieldSearch props isInvalid is rendered 1`] = `
@@ -83,7 +117,7 @@ exports[`EuiFieldSearch props isLoading is rendered 1`] = `
>
@@ -100,7 +134,7 @@ exports[`EuiFieldSearch props prepend is rendered 1`] = `
>
diff --git a/src/components/form/field_search/field_search.test.tsx b/src/components/form/field_search/field_search.test.tsx
index e42d36da773..f45efeceb5b 100644
--- a/src/components/form/field_search/field_search.test.tsx
+++ b/src/components/form/field_search/field_search.test.tsx
@@ -65,6 +65,22 @@ describe('EuiFieldSearch', () => {
expect(component).toMatchSnapshot();
});
+ describe('isClearable', () => {
+ test('is accepted', () => {
+ const component = render();
+
+ expect(component).toMatchSnapshot();
+ });
+
+ test('is rendered when a value exists', () => {
+ const component = render(
+
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+ });
+
test('prepend is rendered', () => {
const component = render();
diff --git a/src/components/form/field_search/field_search.tsx b/src/components/form/field_search/field_search.tsx
index 87507c67ac3..4b8b73d2bb6 100644
--- a/src/components/form/field_search/field_search.tsx
+++ b/src/components/form/field_search/field_search.tsx
@@ -246,7 +246,7 @@ export class EuiFieldSearch extends Component<
'euiFieldSearch--compressed': compressed,
'euiFieldSearch-isLoading': isLoading,
'euiFieldText--inGroup': prepend || append,
- 'euiFieldSearch-isClearable': isClearable,
+ 'euiFieldSearch-isClearable': isClearable && value,
},
className
);
diff --git a/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap b/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
index 80b8396c18a..feaf6298b59 100644
--- a/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
+++ b/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`EuiSelectableSearch is rendered 1`] = `
aria-label="aria-label"
aria-owns="list"
autocomplete="off"
- class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch testClass1 testClass2"
+ class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2"
data-test-subj="test subject string"
role="combobox"
type="search"
diff --git a/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap b/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
index c3f2b69f485..161fb7bc286 100644
--- a/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
+++ b/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = `
aria-haspopup="listbox"
aria-label="aria-label"
autocomplete="off"
- class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search"
+ class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
placeholder="Search for anything..."
type="search"
value=""
@@ -68,7 +68,7 @@ exports[`EuiSelectableTemplateSitewide props popoverButton is not rendered with
aria-haspopup="listbox"
aria-label="Filter options"
autocomplete="off"
- class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search"
+ class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
placeholder="Search for anything..."
type="search"
value=""
@@ -150,7 +150,7 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = `
aria-haspopup="listbox"
aria-label="Filter options"
autocomplete="off"
- class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search"
+ class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
placeholder="Search for anything..."
type="search"
value=""
@@ -196,7 +196,7 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = `
aria-haspopup="listbox"
aria-label="Filter options"
autocomplete="off"
- class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search"
+ class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
placeholder="Search for anything..."
type="search"
value=""
@@ -242,7 +242,7 @@ exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = `
aria-haspopup="listbox"
aria-label="Filter options"
autocomplete="off"
- class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search"
+ class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search"
placeholder="Search for anything..."
type="search"
value=""