calcite-modal is being blocked by another element, but only in Safari #9416
Labels
0 - new
New issues that need assignment.
ArcGIS Solutions
Issues logged by ArcGIS Solutions team members.
browser-safari
Issues tied to the last 2 versions of Safari browser.
bug
Bug reports for broken functionality. Issues should include a reproduction of the bug.
estimate - 5
A few days of work, definitely requires updates to tests.
has workaround
Issues have a workaround available in the meantime.
impact - p3 - not time sensitive
User set priority impact status of p3 - not time sensitive
p - low
Issue is non core or affecting less that 10% of people using the library
spike complete
Issues that have a research spike completed and dev work can proceed
Milestone
Check existing issues
Actual Behavior
We have an instant app that displays a map of features in a left panel and a table of features in a right panel. If one selects multiple features and clicks the "Delete" button, we display a calcite-modal as a double-check before performing the deletion. All is good on Windows (Chrome, Edge, Firefox) and on Mac Chrome. On Mac Safari, however, the calcite-modal is partially blocked.
Here is what the app modal looks like in all but Safari:
![image](https://private-user-images.githubusercontent.com/2125181/333707609-f7c68a41-77fe-4524-93b2-f94424d70339.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI5NjY1NjIsIm5iZiI6MTcyMjk2NjI2MiwicGF0aCI6Ii8yMTI1MTgxLzMzMzcwNzYwOS1mN2M2OGE0MS03N2ZlLTQ1MjQtOTNiMi1mOTQ0MjRkNzAzMzkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MDZUMTc0NDIyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTAxMjZlZGU0OTRiYmQyYTIzNzQyZDk4ODBkZjlmNTIxYjY3MTRmMmI5MWQ4OGYzM2JkNjQ2NDMxODkyZDhiNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.EiTt2DvdETmAP9KvA7p75H3H6b48LZZuMRciAUqGJxc)
And here is what it looks like in Safari:
![image](https://private-user-images.githubusercontent.com/2125181/333707636-b9d1e9f5-ce55-4d34-984c-ddad39fe2dea.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI5NjY1NjIsIm5iZiI6MTcyMjk2NjI2MiwicGF0aCI6Ii8yMTI1MTgxLzMzMzcwNzYzNi1iOWQxZTlmNS1jZTU1LTRkMzQtOTg0Yy1kZGFkMzlmZTJkZWEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MDZUMTc0NDIyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTI1ZjMzMTQ5ODA3YjkxMWI1NjE2OWYzNTZjY2U3YzZhN2JmODc0N2M3ZmI0M2ExYjBiMTg3YWIwMmExMmEzNyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.UGmjJIZR-5NJMQwTN253OErukDMxbk40ITX537SMKQk)
The calcite-modal is triggered by a component that resides in an action-bar:
![image](https://private-user-images.githubusercontent.com/2125181/333707794-56eb3bd1-c74e-462f-849f-ce7df74179b0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI5NjY1NjIsIm5iZiI6MTcyMjk2NjI2MiwicGF0aCI6Ii8yMTI1MTgxLzMzMzcwNzc5NC01NmViM2JkMS1jNzRlLTQ2MmYtODQ5Zi1jZTdkZjc0MTc5YjAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MDZUMTc0NDIyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZTI2NzhiMmJlM2RkNzhlNTVhMWU2YWU2NzNiOGVjYWM3NWI1YzY2MWNlMTY3MDM5MjEyNWY3MDMyZjUxNzRkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.2cnslH5y5C_DOmZArpd58831EgyMQ5wWkdieRGeaKo0)
I can't tell if this is a bug in our app or in calcite: I am having trouble isolating the cause.
Expected Behavior
I expected the modal to be on top, as it is outside of Safari
Reproduction Sample
https://codepen.io/miketschudi/pen/GRaZwEd
Reproduction Steps
In the CodePen, click on the Delete button to open the modal.
The modal is nested because we're using nested components; the modal is in the delete-button component; all other non-calcite-components have been replaced by divs.
Reproduction Version
2.8.3
Relevant Info
Regression?
went back to 1.0.3 and still see issue
Priority impact
impact - p3 - not time sensitive
Impact
Affects Safari users of the Manager Instant App; workaround is to delete items one-by-one via a different Delete button.
Calcite package
Esri team
ArcGIS Solutions
The text was updated successfully, but these errors were encountered: