I confirm that the issue has been fixed, tested on Android. Thank you for the effort👍🏻!

Ok sure, will give it a try soon!

Thank you @jazpearson!

feat(material): add panelClass to mat-select props (#3634)

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) Feature

What is the current behavior? (You can also link to an open issue here) Cannot style the mat-options when using a formly select. Is there another way to do this with the current behaviour?

What is the new behavior (if this is a feature change)? Allows you to specify a class name to the mat-options. This enables the user to help theme the mat-select control.

Please check if the PR fulfills these requirements

• [x] The commit messages follow our guidelines: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format
• [x] A unit test has been written for this change.
• [x] Running npm run build produced a successful build. (Unit testing can be done by running npm test;)
• [x] My code has been linted. (npm run lint to do this. npm run build will fail if there are files not linted.)

Please provide a screenshot of this feature before and after your code changes, if applicable.

Other information:

I understand, please update this PR to add panelClass input to mat-select component.

I see, so instead I suggest introducing a new property: panelClass to mat-select (https://material.angular.io/components/select/api#MatSelect)

You can pass the component directly through type property without the need to declare it:

    {
      key: 'text',
      type: CustomComponent,
      props: {
      },
    },

Thank you @amirshaneh!

docs(upgrade): update UPGRADE-6.0.md (#3635)

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

docs update

What is the current behavior? (You can also link to an open issue here)

typo in migration document

What is the new behavior (if this is a feature change)?

Please check if the PR fulfills these requirements

• [ ] The commit messages follow our guidelines: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format
• [ ] A unit test has been written for this change.
• [ ] Running npm run build produced a successful build. (Unit testing can be done by running npm test;)
• [ ] My code has been linted. (npm run lint to do this. npm run build will fail if there are files not linted.)

Please provide a screenshot of this feature before and after your code changes, if applicable.

Other information:

Hi, thanks for the PR! I think you can style options through className property, you may check my comment hope it may help https://github.com/ngx-formly/ngx-formly/issues/3616#issuecomment-1458685515

Ah hold on that's for the stream, right. Hum. I think we'll have to introduce the concept of a react tag for tracks too...

Right, another solution is to pass the _peerConnectionId to mediaStreamAddTrack.

• Peer 1 (console new MediaStream([e.track]))):

{
  "active": true,
  "_tracks": [
    {
      "id": "janus0",
      "kind": "video",
    }
  ],
  "id": "91281a63-b048-fedd-cdfc-7bdca3ca82f4",
  "_reactTag": "91281a63-b048-fedd-cdfc-7bdca3ca82f4"
}

• Peer 2 (console new MediaStream([e.track]))):

{
    "active": true,
    "_tracks": [
      {
        "id": "janus0",
        "kind": "video",
      }
    ],
    "id": "c42837b4-10a6-1928-be7a-997e5b78aa88",
    "_reactTag": "c42837b4-10a6-1928-be7a-997e5b78aa88"
}

You didn't log the reactTag :-O Is it different?

yes, it is different.

If so the patch should be simple, I'll try to send a PR soon.

:+1:

In getTrack function, without knowing the peer id and since the tracks use the same id, it will always match the track from the first mPeerConnectionObservers.

Can you log the track objects?

Peer instance 1 Track (console e.track):

{
  "_constraints":{},
  "_enabled":true,
  "_muted":false,
  "_peerConnectionId":1,
  "_readyState":"live",
  "_settings":{},
  "id":"janus0",
  "kind":"video",
  "label":"",
  "remote":true
}

Peer instance 2 Track (console e.track):

{
  "_constraints":{},
  "_enabled":true,
  "_muted":false,
  "_peerConnectionId":2,
  "_readyState":"live",
  "_settings":{},
  "id":"janus0",
  "kind":"video",
  "label":"",
  "remote":true
}

They should have different reactTag values.

yes, they have a difference reactTag

Adding the PC ID is not a valid solution because you can add a track that doesn't belong to a PC to a stream.

I see, then I think rely on an unique internal id would solve the issue

Hi,

I've two PeerConnection instances that contains a video track with the same id=janus, when I create a new MediaStream from the second PeerConnection instance, the selected video track is always retrieved the first PeerConnection instance.

const pc1 = new RTCPeerConnection();
....

const pc2 = new RTCPeerConnection();
pc2.addEventListener( 'track', event => {
  remoteMediaStream = new MediaStream();
  remoteMediaStream.addTrack(event.track);
} );
...

<RTCView
  mirror={true}
  objectFit={'cover'}
  streamURL={remoteMediaStream.toURL()}
  zOrder={0}
/>

Solution:

The solution is to pass the peerConnection id to mediaStreamAddTrack in order to getTrack from the right peer connection getTrack

@pdxhunter can you check the following solution instead: https://github.com/ngx-formly/ngx-formly/issues/3495#issuecomment-1316704827

I agree, either we should provide the original value or a map to control the produced option object.

Thank I'll check it then later, I'm looking for sample minimum example, one wrapper & type would suffice to have a quick look, stackblitz is helpful for us to have an instant check without the need to install the project locally.

Hi, could replicate the above code in our stackblitz example (https://stackblitz.com/edit/ngx-formly-ui-bootstrap) in order to check the issue further on our side.

Thanks!

@luizfbicalho I'll merge it soon, just need some time to test it on my side.

Thank you @luizfbicalho!

fix(core): select options pipe has wrong return types

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) Looks like that the functions return types on elect Options Pipe have the wrong types

labelProp was (any)=> any , it's changed to string valueProp was (any)=>boolean, it's changed to any disabledProp was (any)=> string, it's changed to boolean

What is the current behavior? (You can also link to an open issue here)

What is the new behavior (if this is a feature change)?

Please check if the PR fulfills these requirements

[X ] The commit messages follow our guidelines: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format A unit test has been written for this change. [X ] Running npm run build produced a successful build. (Unit testing can be done by running npm test;) [X ] My code has been linted. (npm run lint to do this. npm run build will fail if there are files not linted.) Please provide a screenshot of this feature before and after your code changes, if applicable.

Other information:

Description Classname has no effect on FormlyFieldType using Angular Material 15

Expected behaviour <mat-slide-toggle class="mat-mdc-slide-toggle mat-accent ng-pristine ng-valid ng-touched slider-full-width-before"...></mat-slide-toggle>

Actual behaviour <mat-slide-toggle class="mat-mdc-slide-toggle mat-accent ng-pristine ng-valid ng-touched "...></mat-slide-toggle>

Minimal Reproduction

 {
    key: 'decision',
    type: 'toggle',            
    className: 'slider-full-width-before',
    wrappers: ['form-field', 'togglewrapper'],
    props: {
      labelPosition: 'before',
      label: 'yes or no',
      description: 'make a decision please',
    },
  }

Classname doesnt show up in DOM. If I add class in Chrome devtools it works.

Your Environment

• Angular version: 15.2.0
• Formly version: 6.1.1
• Material: 15.2.0

Additional context Class 'slider-full-width-before' comes from custom material theme. Yes I even put a custom wrapper around it hoping I could add the missing class somehow after view init.

The className is added to formly-fieled element which is located at the root of toggle field type, to update the style of mat-slide-toggle element just use the following selector:

.slider-full-width-before .mat-mdc-slide-toggle {
  ...
}

when Will be a new version?

done in v6.1.2

@digoburigo I've created a PR in material repository, hope it'll be merged soon.