title: How to change the width of NormalPeoplePicker dropdown
body: <p>I'm using default example of NormalPeoplePicker from <a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker#IPeoplePickerProps" rel="nofollow noreferrer">https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker#IPeoplePickerProps</a>.
  When the dropdown displays it cuts off longer items (example: 'Anny Lundqvist, Junior Manager of Soft..'). How do I make it wider, so that the full item's text displays?</p>
  <pre><code>import * as React from 'react';
  import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
  import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
  import { IBasePickerSuggestionsProps, NormalPeoplePicker, ValidationState } from 'office-ui-fabric-react/lib/Pickers';
  import { people, mru } from '@uifabric/example-data';
  
  const suggestionProps: IBasePickerSuggestionsProps = {
    suggestionsHeaderText: 'Suggested People',
    mostRecentlyUsedHeaderText: 'Suggested Contacts',
    noResultsFoundText: 'No results found',
    loadingText: 'Loading',
    showRemoveButtons: true,
    suggestionsAvailableAlertText: 'People Picker Suggestions available',
    suggestionsContainerAriaLabel: 'Suggested contacts',
  };
  
  const checkboxStyles = {
    root: {
      marginTop: 10,
    },
  };
  
  export const PeoplePickerNormalExample: React.FunctionComponent = () =&gt; {
    const [delayResults, setDelayResults] = React.useState(false);
    const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
    const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState&lt;IPersonaProps[]&gt;(mru);
    const [peopleList, setPeopleList] = React.useState&lt;IPersonaProps[]&gt;(people);
  
    const picker = React.useRef(null);
  
    const onFilterChanged = (
      filterText: string,
      currentPersonas: IPersonaProps[],
      limitResults?: number,
    ): IPersonaProps[] | Promise&lt;IPersonaProps[]&gt; =&gt; {
      if (filterText) {
        let filteredPersonas: IPersonaProps[] = filterPersonasByText(filterText);
  
        filteredPersonas = removeDuplicates(filteredPersonas, currentPersonas);
        filteredPersonas = limitResults ? filteredPersonas.slice(0, limitResults) : filteredPersonas;
        return filterPromise(filteredPersonas);
      } else {
        return [];
      }
    };
  
    const filterPersonasByText = (filterText: string): IPersonaProps[] =&gt; {
      return peopleList.filter(item =&gt; doesTextStartWith(item.text as string, filterText));
    };
  
    const filterPromise = (personasToReturn: IPersonaProps[]): IPersonaProps[] | Promise&lt;IPersonaProps[]&gt; =&gt; {
      if (delayResults) {
        return convertResultsToPromise(personasToReturn);
      } else {
        return personasToReturn;
      }
    };
  
    const returnMostRecentlyUsed = (currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise&lt;IPersonaProps[]&gt; =&gt; {
      return filterPromise(removeDuplicates(mostRecentlyUsed, currentPersonas));
    };
  
    const onRemoveSuggestion = (item: IPersonaProps): void =&gt; {
      const indexPeopleList: number = peopleList.indexOf(item);
      const indexMostRecentlyUsed: number = mostRecentlyUsed.indexOf(item);
  
      if (indexPeopleList &gt;= 0) {
        const newPeople: IPersonaProps[] = peopleList
          .slice(0, indexPeopleList)
          .concat(peopleList.slice(indexPeopleList + 1));
        setPeopleList(newPeople);
      }
  
      if (indexMostRecentlyUsed &gt;= 0) {
        const newSuggestedPeople: IPersonaProps[] = mostRecentlyUsed
          .slice(0, indexMostRecentlyUsed)
          .concat(mostRecentlyUsed.slice(indexMostRecentlyUsed + 1));
        setMostRecentlyUsed(newSuggestedPeople);
      }
    };
  
    const onDisabledButtonClick = (): void =&gt; {
      setIsPickerDisabled(!isPickerDisabled);
    };
  
    const onToggleDelayResultsChange = (): void =&gt; {
      setDelayResults(!delayResults);
    };
  
    return (
      &lt;div&gt;
        &lt;NormalPeoplePicker
          // eslint-disable-next-line react/jsx-no-bind
          onResolveSuggestions={onFilterChanged}
          // eslint-disable-next-line react/jsx-no-bind
          onEmptyInputFocus={returnMostRecentlyUsed}
          getTextFromItem={getTextFromItem}
          pickerSuggestionsProps={suggestionProps}
          className={'ms-PeoplePicker'}
          key={'normal'}
          // eslint-disable-next-line react/jsx-no-bind
          onRemoveSuggestion={onRemoveSuggestion}
          onValidateInput={validateInput}
          removeButtonAriaLabel={'Remove'}
          inputProps={{
            onBlur: (ev: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; console.log('onBlur called'),
            onFocus: (ev: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; console.log('onFocus called'),
            'aria-label': 'People Picker',
          }}
          componentRef={picker}
          onInputChange={onInputChange}
          resolveDelay={300}
          disabled={isPickerDisabled}
        /&gt;
        &lt;Checkbox
          label=&quot;Disable People Picker&quot;
          checked={isPickerDisabled}
          // eslint-disable-next-line react/jsx-no-bind
          onChange={onDisabledButtonClick}
          styles={checkboxStyles}
        /&gt;
        &lt;Checkbox
          label=&quot;Delay Suggestion Results&quot;
          defaultChecked={delayResults}
          // eslint-disable-next-line react/jsx-no-bind
          onChange={onToggleDelayResultsChange}
          styles={checkboxStyles}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  function doesTextStartWith(text: string, filterText: string): boolean {
    return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
  }
  
  function removeDuplicates(personas: IPersonaProps[], possibleDupes: IPersonaProps[]) {
    return personas.filter(persona =&gt; !listContainsPersona(persona, possibleDupes));
  }
  
  function listContainsPersona(persona: IPersonaProps, personas: IPersonaProps[]) {
    if (!personas || !personas.length || personas.length === 0) {
      return false;
    }
    return personas.filter(item =&gt; item.text === persona.text).length &gt; 0;
  }
  
  function convertResultsToPromise(results: IPersonaProps[]): Promise&lt;IPersonaProps[]&gt; {
    return new Promise&lt;IPersonaProps[]&gt;((resolve, reject) =&gt; setTimeout(() =&gt; resolve(results), 2000));
  }
  
  function getTextFromItem(persona: IPersonaProps): string {
    return persona.text as string;
  }
  
  function validateInput(input: string): ValidationState {
    if (input.indexOf('@') !== -1) {
      return ValidationState.valid;
    } else if (input.length &gt; 1) {
      return ValidationState.warning;
    } else {
      return ValidationState.invalid;
    }
  }
  
  /**
   * Takes in the picker input and modifies it in whichever way
   * the caller wants, i.e. parsing entries copied from Outlook (sample
   * input: &quot;Aaron Reid &lt;aaron&gt;&quot;).
   *
   * @param input The text entered into the picker.
   */
  function onInputChange(input: string): string {
    const outlookRegEx = /&lt;.*&gt;/g;
    const emailAddress = outlookRegEx.exec(input);
  
    if (emailAddress &amp;&amp; emailAddress[0]) {
      return emailAddress[0].substring(1, emailAddress[0].length - 1);
    }
  
    return input;
  }
  
  </code></pre>