Generates a <select> Element wrapped in a InputContext.

TrackedSelect: (props: {
objectiv?: {
id?: string,
normalizeId?: boolean,
trackValue?: boolean,
stateless?: boolean,
eventHandler?: 'onBlur' | 'onChange' | 'onClick'
}) => <select>

objectiv prop attributes

typedefault value
optionalidstringinferred from native id or title
optionaleventHandler'onBlur' | 'onChange' | 'onClick'onChange
  • When the id attribute is omitted, we attempt to infer it from one of the elements' native props: id or title.

If that fails, an error will be logged to the Developer Console and the original Component is rendered.



Automatic Events

  • InputChangeEvent when eventHandler triggers. Tracking normally occurs only if value (or selectedOptions in multiple mode) changed, unless stateless has been set to true.

Global Contexts

  • InputValueContext with the changed value, if trackValue is set to true. In multiple mode a context for each of the selectedOptions is generated.

Usage example

import { TrackedSelect } from '@objectiv/tracker-react';

<label for={'user'}>Switch user:</label>
<TrackedSelect id={'user'} objectiv={{ trackValue: true }}>
<option value={1}>User A</option>
<option value={2}>User B</option>
<option value={3}>User C</option>
<TrackedSelect multiple objectiv={{ id: 'options', trackValue: true }}>
<option value={'a'} selected>Option A</option>
<option value={'b'}>Option B</option>
<option value={'c'}>Option C</option>

By default, all Tracked Elements automatically normalize their Context identifiers to a kebab-cased format.

This can be disabled via the normalizeId option:

import { TrackedSelect } from '@objectiv/tracker-react';

<TrackedSelect id={'leave as is'} objectiv={{ normalizeId: false }} >
<option value={'id 1'}>User A</option>
<option value={'id 2'}>User B</option>
<option value={'id 3'}>User C</option>

Did you know ?

TrackedSelect internally uses TrackedInputContext.