By default, dropdowns do not render the menu until the button toggle is clicked. So in this case, since there is no menu, the ref isn't valid yet. We'll need to check if menuRef.current exists before calling contains()

Adds ability to set padding on left side if RTL enabled. Also increase test coverage for ModalManager

you may add:

import { Glyphicon } from 'react-bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css';

What is the current behavior?

When mixing up the order of the -enter and -enter-active classes, transitions stop working properly.

/* Works */
.fade-enter .btn {}
.fade-enter-active .btn {}

/* Doesn't work */
.fade-enter-active .btn {}
.fade-enter .btn {}

What is the expected behavior?

I'm expecting the transitions to work regardless of class order, but that might just be my lack of knowledge about CSS transitions talking. I couldn't find anything in the docs explaining that the class order is important.

Could you provide a CodeSandbox demo reproducing the bug?

https://codesandbox.io/s/priceless-brook-66uzg?file=/src/styles.css

Hi, I'm using React Native and I've got the following data structure:

const initialValues = { exercises: [ { title: "", exerciseType: { reps: false, duration: false, extraWeight: false, }, }, ], }; And this is my exercise Schema

const exerciseSchema = yup.object().shape({ exercises: yup.array().of( yup.object().shape({ title: yup.string().required().min(2).label("Exercise Name"), exerciseType: yup.object({ reps: yup.boolean(), duration: yup.boolean(), }), }) ), });

Whilst it's working for title, I can't get it working for the checkboxes. I'm getting the values for reps and duration, but how can I check that at least one of them is true?

This is quite slow and is not acceptable, so I have to resolve the issue before merging this.

The source of the error lays in react-overlays: Dropdown.tsx #281 !menuRef.current!.contains(e.target as HTMLElement)

I'm not sure if the non-null assertion failing should be prevented or if the state of current being null is illegal.

@kyletsang Yeah, if I hadn't used it myself, I also would've missed it. This was the time working with propTypes together with a ts prop type declaration. Naming a defaultProp and leaving the oneOf() without .isRequired doesn't seem to satisfy typescript.

@golota60 yeah, I think fixing it in react-overlays/@restart/ui is the better option. Pick was just a quick fix 😛

Adds ability to set padding on left side if RTL enabled. Also increase test coverage for ModalManager

Thanks, totally missed that

Closes #5885.

Made autoClose optional, refactored code slightly and improved the naming in the doc to be like https://getbootstrap.com/docs/5.0/components/dropdowns/#auto-close-behavior

Describe the bug

The autoClose property in the interface DropdownProps is mandatory though the specification states an implicit standard value. Upon working with NavDropdown, I stumbled across this.

Expected behavior

The autoClose property should not be mandatory. If not defined, the standard value true should be used.

@kyletsang I got around to fixing it by using Pick, but an idea came to my mind, but I'd like to get it confirmed before implementing, cause it would require changes in react-overlays.

So, in react-overlays, instead of having ModalProps we could split them like so:

interface IndexSignature { [other: string]: any};

export interface ModalPropsWithoutIndexSignature {
    children?: React.ReactElement;
    role?: string;
    style?: React.CSSProperties;
    className?: string;
    show?: boolean;
    container?: DOMContainer;
    onShow?: () => void;
    onHide?: () => void;
    manager?: ModalManager;
    backdrop?: true | false | 'static';
    renderDialog?: (props: RenderModalDialogProps) => React.ReactNode;
    renderBackdrop?: (props: RenderModalBackdropProps) => React.ReactNode;
    onEscapeKeyDown?: (e: KeyboardEvent) => void;
    onBackdropClick?: (e: React.SyntheticEvent) => void;
    containerClassName?: string;
    keyboard?: boolean;
    transition?: ModalTransitionComponent;
    backdropTransition?: ModalTransitionComponent;
    autoFocus?: boolean;
    enforceFocus?: boolean;
    restoreFocus?: boolean;
    restoreFocusOptions?: {
        preventScroll: boolean;
    };
}

export type ModalProps = ModalPropsWithoutIndexSignature & IndexSignature;

Doing that would allow us to import ModalPropsWithoutIndexSignature as BaseModalProps instead of ModalProps as BaseModalProps, and then, in react-bootstrap we would just re-apply the index signature like so

export interface ModalProps
  extends Omit<
    BaseModalProps,
    | 'role'
    | 'renderBackdrop'
    | 'renderDialog'
    | 'transition'
    | 'backdropTransition'
  > {
  size?: 'sm' | 'lg' | 'xl';
  fullscreen?:
    | true
    | 'sm-down'
    | 'md-down'
    | 'lg-down'
    | 'xl-down'
    | 'xxl-down';
  bsPrefix?: string;
  centered?: boolean;
  backdropClassName?: string;
  animation?: boolean;
  dialogClassName?: string;
  contentClassName?: string;
  dialogAs?: React.ElementType;
  scrollable?: boolean;
  [other: string]: any;
}

I think this way of handling it would be better - if ModalProps in react-overlays ever change, when using Pick we would need to update that, but if we apply the suggested solution it would take care of itself