CRITICAL! Getting error "[LayoutConstraints] Unable to simultaneously satisfy constraints." when user touches HTML SELECT list

[epabst]

Issue Type

• Bug Report
• Feature Request
• Support Question

Description

The app I'm building has an HTML SELECT element in it with some options. Here is the DOM:

<select id="formControl12" class="form-control">
  <option label="3" value="3"></option>
  <option label="4" value="4"></option>
  <option label="5" value="5"></option>
</select>

When I run "cordova build ios" and run it on an ios device simulator, and click on the select list, I get the following error that is making my app NOT USABLE on ios devices:

2021-09-16 06:30:32.625254-0600 Future Balance[1035:28945] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
    (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSAutoresizingMaskLayoutConstraint:0x6000033c0730 h=--& v=--& _UIToolbarContentView:0x7fbbcd65a540.height == 0   (active)>",
    "<NSLayoutConstraint:0x6000033ad1d0 V:|-(0)-[_UIButtonBarStackView:0x7fbbcd610170]   (active, names: '|':_UIToolbarContentView:0x7fbbcd65a540 )>",
    "<NSLayoutConstraint:0x6000033ad220 _UIButtonBarStackView:0x7fbbcd610170.bottom == _UIToolbarContentView:0x7fbbcd65a540.bottom   (active)>",
    "<NSLayoutConstraint:0x6000033ddae0 UIButtonLabel:0x7fbbcd68ea30.centerY == _UIModernBarButton:0x7fbbcd47a0e0'Done'.centerY + 0.5   (active)>",
    "<NSLayoutConstraint:0x6000033dbde0 'TB_Baseline_Baseline' _UIModernBarButton:0x7fbbcd47a0e0'Done'.lastBaseline == UILayoutGuide:0x6000029d7aa0'UIViewLayoutMarginsGuide'.bottom   (active)>",
    "<NSLayoutConstraint:0x6000033dbe30 'TB_Top_Top' V:|-(>=0)-[_UIModernBarButton:0x7fbbcd47a0e0'Done']   (active, names: '|':_UIButtonBarButton:0x7fbbcd68c990 )>",
    "<NSLayoutConstraint:0x6000033d7de0 'UIButtonBar.maximumAlignmentSize' _UIButtonBarButton:0x7fbbcd68c990.height == UILayoutGuide:0x6000029d4700'UIViewLayoutMarginsGuide'.height   (active)>",
    "<NSLayoutConstraint:0x6000033acff0 'UIView-bottomMargin-guide-constraint' V:[UILayoutGuide:0x6000029d4700'UIViewLayoutMarginsGuide']-(0)-|   (active, names: '|':_UIButtonBarStackView:0x7fbbcd610170 )>",
    "<NSLayoutConstraint:0x6000033dbd40 'UIView-bottomMargin-guide-constraint' V:[UILayoutGuide:0x6000029d7aa0'UIViewLayoutMarginsGuide']-(16)-|   (active, names: '|':_UIButtonBarButton:0x7fbbcd68c990 )>",
    "<NSLayoutConstraint:0x6000033acf50 'UIView-topMargin-guide-constraint' V:|-(0)-[UILayoutGuide:0x6000029d4700'UIViewLayoutMarginsGuide']   (active, names: '|':_UIButtonBarStackView:0x7fbbcd610170 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x6000033ddae0 UIButtonLabel:0x7fbbcd68ea30.centerY == _UIModernBarButton:0x7fbbcd47a0e0'Done'.centerY + 0.5   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

The user sees the bottom part of the screen as a selector but with no options showing up to pick from.

See https://stackoverflow.com/questions/69214395/ios-cordova-getting-error-layoutconstraints-unable-to-simultaneously-satisfy for screenshots.

Information

This happens with multiple cordova apps I tried in ios.

Command or Code

Have any with options. Then run cordova build ios. Then open in ios emulator or device. Environment, Platform, Device iOS Emulator and in real iPhone Version information cordova 10.0.0 cordova-ios 6.2.0 iOS 14.5 iPhone 11 Emulator (and customer on real device) MacBook Air with MacOS Big Sur 11.5.2 XCode 12.5.1 cordova-ios 6.2.0 cordova-plugin-buildinfo 4.0.0 cordova-plugin-purchase 10.6.1 from github:j3k0/cordova-plugin-purchase cordova-plugin-statusbar 2.4.3 cordova-plugin-whitelist 1.3.5 Checklist [x] I searched for already existing GitHub issues about this [x] I updated all Cordova tooling to their most recent version [x] I included all the necessary information above

[breautek]

Cordova doesn't do any layouts directly in regards to DOM elements. That's the WebView responsibility, so for that, you'll need to raise an issue with WebKit.

But that isn't what's causing what you see in your screenshots. I created my own reproduction app and saw both your screenshot and the constraint error. The reason why you see no list items (they actually exist with no label) is because you have invalid DOM.

You should have:

<!-- This is the correct <option> schema
<option value="1">1</option>

<!-- this is incorrect -->
<option label="1" value="1"></option>

label attribute does work in modern browsers, it doesn't work in WKWebView.

Please let me know if this solves your issue.

[epabst]

That worked!!!!! You are AWESOME!!