Can't limit field choices with FieldPickerSynced allowedTypes

I’m trying to limit the available choices when picking a field for my app. Looking through the FieldPickerSynced documentation I found “allowedTypes” property. Per and example I found here: Error: Cell values for field X are not loaded - #3 by Maximilian I added the “import {FieldType}” line.

I can pick a table, but I can’t pick a field and it doesn’t limit my choices to a specific field type. If I removed the “allowedTypes” property, I can select any field.

image

The table I’m testing this on only has two columns (autonumber, link to record).

What am I missing?

import {
initializeBlock,
TablePickerSynced,
FieldPickerSynced,
useGlobalConfig,
useWatchable,
useLoadable,
useBase,

} from '@airtable/blocks/ui';
import {cursor} from '@airtable/blocks';
import {FieldType} from '@airtable/blocks/models'; //<--ADDED THIS LINE
import React from 'react';

function CopyDataset() {
// YOUR CODE GOES HERE
const base = useBase();
const globalConfig = useGlobalConfig();    
const tableId = globalConfig.get('selectedTableId'); // parent table selection
const fieldId = globalConfig.get('fieldId');

const table = base.getTableByIdIfExists(tableId);
const field = table ? table.getFieldByIdIfExists(fieldId) : null;

//const ctableId = globalConfig.get('selectedcTableId'); // child table selection
   useLoadable(cursor);
   useWatchable(cursor, ['selectedRecordIds', 'selectedFieldIds']) // retrieves record and field ids of     selection

    return (
            <div>
                <p>Pick Parent Table: <TablePickerSynced globalConfigKey="selectedTableId" /></p>
                Pick linked records field: <FieldPickerSynced
                                                table = {table} 
                                                globalConfigKey="fieldId" 
                                                placeholder="Pick a field..."
                                                allowedTypes={[FieldType.AUTONUMBER]} \\<--ADDED THIS LINE
                                            />

                </div>
        );
}

function SelectedRecordAndFieldIds() {
    // load selected records and fields
    useLoadable(cursor);
    // re-render whenever the list of selected records or fields changes
    useWatchable(cursor, ['selectedRecordIds', 'selectedFieldIds']);
    return (
        <div>
            Selected records: {cursor.selectedRecordIds.join(', ')}
            Selected fields: {cursor.selectedFieldIds.join(', ')}
        </div>
    );
}

initializeBlock(() => <CopyDataset />);

I caught my typo that prevented me from picking any field. Now I can pick a field with a matching type.

allowedTypes={[FieldType.AUTONUMBER]
allowedTypes={[FieldType.AUTO_NUMBER]

However, this doesn’t limit the choices.

Hi did you get to the bottom of this? Im trying to limit the choices (to filter out options that have been selected in previous choices)

I haven’t had time to get back to working in this.