Identify M3 demo sample issues, determine source of each, and file relevant issues

[parlough]

I'm going to be using this issue to find and track issues with the sample, then determine if they're caused by wasm compilation, skwasm, the sample itself, browser support, or Flutter. If an issue is not open for any issues found, I will open one in the appropriate repository and link to it from here.

Code: https://github.com/flutter/samples/tree/main/material_3_demo
Version: HEAD on main
Staged: https://parlough-testing-skwasm.web.app/

Determined issues

Wasm build

These issues happen with flutter build web --wasm (using CanvasKit).

• Time picker shows 03:54 Dec 24 if it's currently 15:54 Dec 23
  • So time picker thought it was 12 hours later (later learned because I am in UTC-6)
  • Issue: [dart2wasm] DateTime.timeZoneOffset has the wrong sign dart-lang/sdk#54448
  • Fix: https://dart-review.googlesource.com/c/sdk/+/343520

skwasm renderer

These issues happen with flutter build web --wasm --web-renderer=skwasm.

• Selecting image doesn't change color scheme
  • Issue: [skwasm] ColorScheme.fromImageProvider always produces the same result flutter#141326
• Typed text doesn't render in any text field or search bar
  • Issue: [skwasm] Text input decorations and text are often invisible flutter#141001
• Disabled ActionChip and disabled InputChip aren't rendering their contents
  • Issue: [skwasm] Disabled ActionChip with label and avatar fails to render contents flutter#140999
• Background of "x" on hover of InputChip is improperly located
  • Issue: [skwasm] InputChip delete icon hover square is not centered flutter#141000

Flutter (framework or engine)

I determined these issues affect all Flutter backends, at least web and desktop.

• x/delete button on InputChip has square background on hover inconsistent with ink splash.
  • Ink splash on holding the "x" is too big
  • According to https://m3.material.io/components/chips/specs#4d4c1079-e4e7-4e03-9a17-9a8f09c06e85, it looks like it should be circular
  • Issue: Chips delete button hover style is square, not circular flutter#141335
• Hovering over where "Delete" would be in the disabled InputChip shows delete even though it's not interactable
  • Issue: Disabled chips with onDeleted callback shows "Delete" tooltip on hover flutter#141336
• Wide screen date picker "Switch to input" button is too close to corner
  • Issue: Wide DatePickerDialog "Switch to input" button has no margin from dialog side flutter#141338
• Narrow screen date picker has vertical scroll bar that does nothing even if not needed on 6 row months
  • Issue: Narrow DatePickerDialog has unnecessary scrollbar on months with 6 rows flutter#141348
• Holding a day in the date picker results in a bigger inkwell than the button
  • Issue: DatePickerDialog date entry hover background and ink splash have different radius flutter#141350
• The progress bars/indicators don't fit in well with the rest of the widgets.
  • Perhaps because of lack of round ends? Or colors too harsh?
  • Issue: Update both ProgressIndicator for Material 3 redesign flutter#141340
• SnackBar "Close" text hover surface is (almost) impossible to see in light and dark themes
  • Issue: SnackBar action hover state background too hard to see flutter#141343
• Cursor in filled text fields with label too big, clips with text
  • Issue: Default TextField styles result in cursor overlapping labelText flutter#141354
• In the search bar search menu, the "X" is confusing when you haven't typed anything. Seems like it should exit.
  • Issue: SearchAnchor search view clear button shows up even if you haven't entered any text flutter#141346
  • Issue: SearchAnchor search view close and clear buttons don't have hover tooltips flutter#141347
• If you make a selection in the search bar, leave it with tab focus, then return with tab focus and push "Enter", focus is lost? If you focus the search bar, then press "Enter", focus is lost and returned to the beginning of the app.
  • Issue: Pressing enter in non-expanded SearchAnchor.bar loses focus flutter#141395
• The non-modal bottom sheet doesn't have a drag handle, but the modal one does.
  • Issue: showBottomSheet should have a showDragHandle option like showModalBottomSheet flutter#141353
• Circle when hovering back button of medium and large top app bars is too big
  • AppBar back button focus/hover circle should not fill up whole height flutter#141361

Sample

I determined these issues are likely because of the sample itself.

• Tab order in wide screen/expanded navigation menu is wrong.
  • It seems to be going by column rather than row?
• In the search anchor search view, "No search history" is too low contrast and positioned too close to the divider.
• If you open "Show bottom sheet" then close it by dragging or the back button in the upper right, the text button will still say "Hide bottom sheet" despite it already being hidden.
• In the "Text fields" section, the X/close buttons added to each should only appear once text is added and they should have a little margin from the right.

Browser(s)

• Annoying warning about WebGL extension support from Chrome
  • WebGL: this extension has very low support on mobile devices; do not rely on it for rendering effects: WEBGL_polygon_mode

Undetermined issues

Not sure

• Uncaught TypeError: Cannot read properties of null (reading 'ds'...
  • I can't reproduce. Might have been fixed.
• Still working to find more discrepancies
• Typing in text input boxes on narrow, short screen moves page up

Sample or Flutter

I determined these issues impact the sample whether running with Wasm or not. I still need to determine if they are because of Flutter or because of the sample.

• Sometimes after resizing the window, can't scroll down all the way
  • Video: https://github.com/flutter/samples/assets/18372958/6d6b0727-ae93-46eb-9877-336135c3f84a

[parlough]

Hi all! I've gone through the Material 3 demo sample to find various issues, then determine if they are caused by dart2wasm compilation, the skwasm renderer, Flutter, or the sample itself.

You can find each of these issues above organized within those categories. Each issue has a link to the corresponding Flutter or Dart issue(s) I filed for them, as well as to the relevant fix if that's been made.

\cc @kevmoo For awareness about the various skwasm issues. As for dart2wasm with or without skwasm, it resulted in only one issue unique to it, and I was able to fix that in the SDK.
\cc @QuncCccccc For awareness and potentially help with resolving the sample and framework issues.

Thanks!

[kevmoo]

@parlough – you rock SOOO MUCH 🤘