fix(devui): increase z-index of select menu to appear above editor (#840)

This commit is contained in:
Nathan Bierema 2021-09-05 20:03:00 +00:00 committed by GitHub
parent 5fb8f02add
commit 515953a118
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 5 deletions

View File

@ -73,6 +73,10 @@ export class Select<
borderColor: props.theme.colors.neutral10,
},
}),
menu: (base) => ({
...base,
zIndex: 10,
}),
}}
/>
);

View File

@ -333,6 +333,7 @@ exports[`Select should select another option 1`] = `
Object {
"container": [Function],
"control": [Function],
"menu": [Function],
}
}
theme={[Function]}
@ -396,6 +397,7 @@ exports[`Select should select another option 1`] = `
Object {
"container": [Function],
"control": [Function],
"menu": [Function],
}
}
tabIndex="0"
@ -493,6 +495,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -650,6 +653,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -810,6 +814,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -968,6 +973,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -1120,6 +1126,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -1353,6 +1360,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -1492,6 +1500,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -1642,6 +1651,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -1839,6 +1849,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -1973,6 +1984,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -2027,14 +2039,14 @@ exports[`Select should select another option 1`] = `
"position": "absolute",
"top": "100%",
"width": "100%",
"zIndex": 1,
"zIndex": 10,
}
}
onMouseDown={[Function]}
onMouseMove={[Function]}
>
<div
className=" css-1uhnaxp-menu"
className=" css-17wpf85-menu"
onMouseDown={[Function]}
onMouseMove={[Function]}
>
@ -2133,6 +2145,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -2293,6 +2306,7 @@ exports[`Select should select another option 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -2489,6 +2503,7 @@ exports[`Select shouldn't find any results 1`] = `
Object {
"container": [Function],
"control": [Function],
"menu": [Function],
}
}
theme={[Function]}
@ -2552,6 +2567,7 @@ exports[`Select shouldn't find any results 1`] = `
Object {
"container": [Function],
"control": [Function],
"menu": [Function],
}
}
tabIndex="0"
@ -2649,6 +2665,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -2793,6 +2810,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -2953,6 +2971,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -3111,6 +3130,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -3263,6 +3283,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -3496,6 +3517,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -3635,6 +3657,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -3785,6 +3808,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -3982,6 +4006,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -4116,6 +4141,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -4170,14 +4196,14 @@ exports[`Select shouldn't find any results 1`] = `
"position": "absolute",
"top": "100%",
"width": "100%",
"zIndex": 1,
"zIndex": 10,
}
}
onMouseDown={[Function]}
onMouseMove={[Function]}
>
<div
className=" css-1uhnaxp-menu"
className=" css-17wpf85-menu"
onMouseDown={[Function]}
onMouseMove={[Function]}
>
@ -4270,6 +4296,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,
@ -4409,6 +4436,7 @@ exports[`Select shouldn't find any results 1`] = `
"styles": Object {
"container": [Function],
"control": [Function],
"menu": [Function],
},
"tabIndex": "0",
"tabSelectsValue": true,

View File

@ -128,7 +128,7 @@ export default class TestTab<S, A extends Action<unknown>> extends Component<
return (
<Container>
<Toolbar>
<div style={{ flexGrow: 1, zIndex: 10 }}>
<div style={{ flexGrow: 1 }}>
<Select
options={templates}
getOptionValue={(template: Template) => template.name!}