TrackedSelect

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
optionalnormalizeIdbooleantrue
optionaltrackValuebooleanfalse
optionalstatelessbooleanfalse
optionaleventHandler'onBlur' | 'onChange' | 'onClick'onChange
info
  • 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.

Returns​

<select>

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';

<div>
  <header>
    <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>
  </header>
  <main>
    <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>
    </TrackedSelect>
  </main>
</div>

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';

<div>
  <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>
  </TrackedSelect>
</div>

Did you know ?

TrackedSelect internally uses TrackedInputContext.


See also