Form in Window Z-Problem with MultiSelect

[Yahia]

Hi,

the following breaks when used/wrapped in a Window - then the MultiSelect is rendered behind the Windows and is not accessible to the user (happens for example on FF 76.0.1 (Windows 64-Bit).

Is there anything I can do to mitigiate this? Or is this a known bug?

Best Regards

Yahia

 

                                <Form
                                    onSubmit={this.handleSubmit}
                                    initialValues={{
                                        amount: 0
                                    }}
                                    render={(formRenderProps) => (
                                        <FormElement style={{ width: 500 }} horizontal={false}>
                                            <Field
                                                id={'searchinput'}
                                                name={'searchinput'}
                                                label={'Suche nach'}
                                                placeholder={'Bildname oder Schlagworte oder Artikelnummer'}
                                                component={FormInput}
                                                validator={requiredValidator}
                                            />
                                            <Field

                                                id={'searchimgtypes'}
                                                name={'searchimgtypes'}
                                                label={'Bildtypen'}
                                                hint={'Hinweis: Bildtyp(en) einschränken (optional)'}
                                                component={FormMultiSelect}
                                                data={imgtypes}
                                                textfield={'text'}
                                                optional={true}
                                            />
                                &nbsp;
                                            <span className={'k-form-separator'} />
                                            <Field
                                                id={'includedeleted'}
                                                name={'includedeleted'}
                                                label={'inklusive gelöschte Bilder'}
                                                component={FormCheckbox}
                                                optional={true}
                                            />
                                &nbsp;
                                            <div className="k-form-buttons k-buttons-end">
                                            <Button onClick={formRenderProps.onFormReset}>
                                                    Abbrechen
                        </Button>
                                                <Button
                                                    primary={true}
                                                    type={'submit'}
                                                    disabled={!formRenderProps.allowSubmit}
                                                >
                                                    Los
                        </Button>
                                            </div>
                                        </FormElement>

[Stefan]

Hello, Yahia,

I assume that this is caused by the z-index difference between the Window and the MultiSelect Popup:

https://www.telerik.com/kendo-react-ui/components/popup/stack-order/

Please let me know if the issue still occurs after changing the z-index.

Regards,
Stefan
Progress Telerik