onSelect

The onSelect prop is a callback function that is triggered when a suggestion is selected, either by clicking or through keyboard navigation. It provides access to the full suggestion data before it's added as an item.

Type Definition

type OnSelectCallback = (suggestion: ChipsterSuggestion) => void;
 
type ChipsterSuggestion = string | {
  label: string;
  icon?: React.ReactNode;
  data?: any;
};

Basic Usage

BasicExample.tsx

import { Chipster } from '@micoblanc/chipster'
 
export default function BasicExample() {
  const handleSelect = (suggestion: ChipsterSuggestion) => {
    console.log('Selected:', suggestion)
    // Additional logic here
  }
 
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input placeholder="Search..." />
      <Chipster.Suggestions
        getSuggestions={(input) => ['React', 'Vue', 'Angular']}
        onSelect={handleSelect}
      />
    </Chipster>
  )
}

With Rich Data Handling

RichDataExample.tsx

export default function RichDataExample() {
  const handleSelect = (suggestion: ChipsterSuggestion) => {
    if (typeof suggestion === 'object') {
      const { label, data } = suggestion
      // Access additional data
      trackSelection({
        value: label,
        metadata: data,
        timestamp: Date.now()
      })
    }
  }
 
  const getSuggestions = (input: string) => [
    { 
      label: 'React', 
      icon: '⚛️',
      data: { 
        id: 1, 
        category: 'framework',
        version: '18.0.0'
      }
    },
    // More suggestions...
  ]
 
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input placeholder="Select framework" />
      <Chipster.Suggestions
        getSuggestions={getSuggestions}
        onSelect={handleSelect}
      />
    </Chipster>
  )
}

Important Notes

Called before the suggestion is added as an item
Receives the full suggestion object or string
Works with both keyboard and mouse selection
Can be async without affecting item addition
Triggered for both string and object suggestions
Access to additional data through suggestion.data
Independent of validation rules
Called even if item addition is prevented

Common Use Cases

Analytics tracking
Data synchronization
UI feedback
State management
API calls
Event logging
Cache updates
User interaction tracking

With Custom Validation

ValidationExample.tsx

export default function ValidationExample() {
  const handleSelect = (suggestion: ChipsterSuggestion) => {
    if (typeof suggestion === 'object' && suggestion.data) {
      // Validate selection based on additional data
      if (suggestion.data.isDeprecated) {
        toast.warning(`${suggestion.label} is deprecated`)
      }
      
      if (suggestion.data.requiresLicense) {
        checkLicenseStatus(suggestion.data.id)
      }
    }
  }
 
  return (
    <Chipster>
      <Chipster.ItemList />
      <Chipster.Input placeholder="Select package" />
      <Chipster.Suggestions
        getSuggestions={fetchPackages}
        onSelect={handleSelect}
      />
    </Chipster>
  )
}

getSuggestions How to style it?