Allow modifying the Select's popover fullWidth and placement

Dammic commented 3 years ago

🚀 Feature Proposal

Instead of setting hardcoded 'true' for fullWidth prop for popover on Select, I'd like to be able to set that myself. I'd also would like to modify the 'placement' prop, which currently is not passed at all for Select (Autocomplete has that, and they are quite similar components in terms of usage)

Motivation

Adding those options would allow more customizability potential for the Select. I have a special case of select that I'd like to have menu wider than the select input triggering it. In the current form, the menu is cut to the width of that select component, which is not ideal, and I see no other way of modifying that.

Example

<Select
 ...
 fullWidth={false}
 placement="left end"
/>

Dammic commented 3 years ago

What could be nice perhaps could be generally allowing to set popover props on Select, that way also some of the other props can be covered (like onBackdropPress, which could be really useful for differeniating between 'outside' click and click on the select input)

Dammic commented 3 years ago

I'll share one more usecase for that: In our application, we'd like to have a select on a navigation menu. The navigation menu has 'z-index' set, and due to not being able to pass z-index to the popover (via style, for ex), the select menu is rendered under the navigation, with no way to fix that

ipakhomov commented 9 months ago

If anyone look for a temporary solution - below is the patch for patch-package that add ability to modify props of the Popover inside Select component like that:

    <Select
      ...
      popoverMenuProps={{ fullWidth: false, placement: 'left end' }}
    />

Patch contents

```patch # This patch allows to customize Popover menu props for Select component # Issue: https://github.com/akveo/react-native-ui-kitten/issues/1331 diff --git a/node_modules/@ui-kitten/components/ui/select/select.component.d.ts b/node_modules/@ui-kitten/components/ui/select/select.component.d.ts index a7d02f4..4c24f59 100644 --- a/node_modules/@ui-kitten/components/ui/select/select.component.d.ts +++ b/node_modules/@ui-kitten/components/ui/select/select.component.d.ts @@ -9,6 +9,7 @@ import { ChildrenWithProps, EvaInputSize, EvaStatus, IndexPath, RenderProp, Touc import { StyledComponentProps } from '../../theme'; import { SelectGroupProps } from './selectGroup.component'; import { SelectItemProps } from './selectItem.component'; +import { PopoverProps } from '../popover/popover.component'; type SelectStyledProps = Overwrite; }>; @@ -25,6 +26,7 @@ export interface SelectProps extends TouchableWebProps, SelectStyledProps { accessoryRight?: RenderProp>; status?: EvaStatus; size?: EvaInputSize; + popoverMenuProps?: Partial; } export type SelectElement = React.ReactElement; interface State { @@ -192,4 +194,4 @@ export declare class Select extends React.Component { private renderInputElement; render(): React.ReactElement; } -export {}; +export { }; diff --git a/node_modules/@ui-kitten/components/ui/select/select.component.js b/node_modules/@ui-kitten/components/ui/select/select.component.js index 0144179..daf7f75 100644 --- a/node_modules/@ui-kitten/components/ui/select/select.component.js +++ b/node_modules/@ui-kitten/components/ui/select/select.component.js @@ -327,7 +327,7 @@ let Select = class Select extends react_1.default.Component { const evaStyle = this.getComponentStyle(eva.style); return ( - this.renderInputElement(touchableProps, evaStyle)} onBackdropPress={this.onBackdropPress}> + this.renderInputElement(touchableProps, evaStyle)} onBackdropPress={this.onBackdropPress} {...(this.props.popoverMenuProps || {})}> ```

akveo / react-native-ui-kitten