[UI] Airtable field fixes (#276)

* Reset fields if selected table changes Signed-off-by: brookewp <brooke.kaminski@automattic.com> * Limit fields dropdown size and prevent cut off Signed-off-by: brookewp <brooke.kaminski@automattic.com> --------- Signed-off-by: brookewp <brooke.kaminski@automattic.com>
Automattic · Jan 6, 2025 · 3d6c73d · 3d6c73d
1 parent 77efde3
commit 3d6c73d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/data-sources/DataSourceSettings.scss b/src/data-sources/DataSourceSettings.scss
@@ -79,7 +79,6 @@
 
 
 .rdb-settings-page_data-source-form {
-	overflow-y: auto;
 	padding: 0 16px 40px;
 
 	@media screen and (min-width: 782px) {
@@ -233,6 +232,11 @@
 	}
 }
 
+.components-form-token-field__input-container > div:first-child {
+	max-height: 220px;
+	overflow-y: scroll;
+}
+
 .components-form-token-field__input-container.is-active {
 	position: relative;
 }

diff --git a/src/data-sources/airtable/AirtableSettings.tsx b/src/data-sources/airtable/AirtableSettings.tsx
@@ -1,6 +1,6 @@
 import { SelectControl } from '@wordpress/components';
 import { InputChangeCallback } from '@wordpress/components/build-types/input-control/types';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { ChangeEvent } from 'react';
 
@@ -132,6 +132,13 @@ export const AirtableSettings = ( {
 		}
 	};
 
+	// if the selected table changes, reset the fields
+	useEffect( () => {
+		if ( currentTableId !== state.tables?.[ 0 ]?.id ) {
+			setTableFields( [] );
+		}
+	}, [ currentTableId ] );
+
 	let connectionMessage: React.ReactNode = (
 		<span>
 			<a href="https://support.airtable.com/docs/creating-personal-access-tokens" target="_label">