[Bug]: Incorrect Persona Initials when formatted lastname, firstname middleinitial

[SavannahBourgeois]

Component

Persona

Package version

^9.54.4

React version

^18.2.0

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
    Memory: 96.30 GB / 127.71 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Current Behavior

When the user's name is formatted as "Lastname, Firstname Middle Initial" the persona initials display the incorrect information.   The initials displayed are derived from the customer’s last name and middle name, which is incorrect. The persona should display the initials of the first name and last name. For example, the customer’s name is Carole L Reynolds, and the persona should show “CR” or “RC” instead of “RL”.

Expected Behavior

For example, the customer’s name is Carole L Reynolds, and the persona should show “CR” or “RC” instead of “RL”.

Reproduction

https://stackblitz.com/edit/28waam?file=src%2Fexample.tsx

Steps to reproduce

Open the stackblitz. Observe the initials vs what was passed in

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[tudorpopams]

@mainframev is the owner of Persona. He's now wrapping up the work on KeyTips and will pick this one up afterwards.

[tabrumle]

@mainframev when you get to this could you please fix for both the v8 and v9 version? This would allow us to ensure coherence in initials generation for apps that are in the process of migrating to v9.

[tudorpopams]

@mainframev when you get to this could you please fix for both the v8 and v9 version? This would allow us to ensure coherence in initials generation for apps that are in the process of migrating to v9.

Hello, we are only going to fix the v9 component. We are only addressing high severity issues for v8 and are planning to slowly mitigate usage of v8.

[mainframev]

@SavannahBourgeois @tabrumle

I do not think it's a bug, looks like luck of support for this particular format you provided

"First Middle Last" works as expected:

react-persona uses react-avatar inside and expose avatar slot that you can use. The docs mention:

It is usually not necessary to specify custom initials; by default they will be derived from the name prop, using the getInitials function.

The default is not fitting you needs, so you can use initials.

Try to use initials in avatar slot:

    <Persona
      // Reynolds, Carole L
      name={name}
      secondaryText="Available"
      presence={{ status: 'available' }}
      avatar={{
        // your custom getInitials
        initials: getInitials(name),
        image: {
          src: 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/persona-male.png',
        },
      }}
      {...props}
    />

[SavannahBourgeois]

@mainframev @tabrumle I understand the default doesn't fit the needs of this customer, but I still think it should be built into the default. It seems like a pretty common scenario you would want to support.

[tudorpopams]

Hello, as @mainframev said, this case is already handled by the initials prop inside avatar which can be used like in the example he provided.

The prop was added specifically for cases like this one, which cannot be generalised (there are people with multiple middle names, for example).

Please advise customers that face this case to use the initials prop, as suggested above.