CODEWITHSUNDEEP
reactjsspfxoffice-ui-fabricpeoplepicker
almckelvie
almckelvie

Reputation: 11

How do I prevent Office UI Fabric React PeoplePicker results dismissing on scroll

I am building an SPXF webpart which uses the Office UI Fabric React PeoplePicker to show people results, however I've noticed the results Callout is disappearing on scroll which is a particular issue on mobile where real estate is limited (e.g. when keyboard takes up half the screen and you want to scroll results).

I notice that the Callout component has the preventDismissOnScroll property which would appear to be what I need, however can I access this from the PeoplePicker? 

<PeoplePicker
     context={this.props.context}    
     titleText=""    
     personSelectionLimit={1}    
     groupName={""}   
     showtooltip={false}    
     isRequired={true}    
     disabled={false}    
     ensureUser={true}    
     selectedItems={this._getPeoplePickerItems}                   
     // ** access Callout props for  preventDismissOnScroll={true} ?
     />

Or are there other solutions to this issue?

SPFx 1.8 | Office fabric React 6.156.0

Upvotes: 1

Views: 777

Answers (1)

Aidam1
Aidam1

Reputation: 103

You can access Callout props by using pickerCalloutProps. The preventDismissOnScroll is deprecated, but you can use preventDismissOnEvent.

<PeoplePicker
     ...
     pickerCalloutProps={{ preventDismissOnEvent }}
/>

Upvotes: 1

Related Questions