1

I'm trying to show a phone number to a user, in a lightning web component, so that when they click on the number, it populates an input box.

LWCs have the lightning-formatted-phone component, however clicking on this triggers a click-to-dial event.

The specification for the component says it has a "click" method, but doing this:

<lightning-formatted-phone
    value="+18005551212"
    onclick={myHandler}>
</lightning-formatted-phone>

Doesn't fire myHandler in the component, so I can't stopPropagation() nor preventDefault().

My question is how can I show a formatted phone number in a LWC with custom click behavior? Can this be achieved with the standard formatted phone input, or is there another Salesforce-y way to do this?

2
  • 2
    There is a strong chance that the "Click-To-Dial" event is being triggered from your browser, not from SFDC. I'd try different browsers to double-check. Jul 13, 2020 at 16:48
  • I edited my answer with an example playground, I am able to call preventDefault() in the click handler.
    – adriancg
    Jul 14, 2020 at 2:23

2 Answers 2

1

The click-to-dial event is coming from the standard HTML protocol tel:. Your browser is looking for it and if available it tries to dial that phone number when you click on it. The <lightning-formatted-phone> component looks like so when it builds in the browser:

enter image description here

tel: is not so much a feature as it is a protocol, much in the same way that http: and mailto: are protocols for the tag feature

Source and Source2.

In order to prevent the click-to-dial action you need to get rid of the tel: part of the <a> element. Since this is an out of the box component provided by Salesforce this functionality is internally handled and you can't modify it.

What you need to do, in order to prevent this from happening, is format the phone number yourself using a standard html element such as a <span> or a <div>.

I put a playground together to show you how you can easily mimic what the SF component does. You can check it out here.

All you have to do is add a <span> element and style it like so:

HTML

<span class="phone-link" onclick={myHandler}>+18005551212</span>

CSS

.phone-link {
    color: #006dcc;
    cursor: pointer;
}
.phone-link:hover {
    text-decoration: underline;
}

However a potential complexity for you could be the formatting of the phone number yourself using JavaScript.

2
  • The tel: information is useful, but this doesn't answer the question. If the answer ends up being "there's no other way except to manually implement a javascript formatting function" i'll probably just delete the question, because it's no longer a salesforce specific answer
    – Andy Ray
    Jul 13, 2020 at 20:22
  • As I pointed out in my answer the way to do is it to get rid of the "tel:" in the lightning-formatted-phone which you have no control over. So there's no way to achieve what you are asking using the out of the box functionality for formatting a phone number.
    – Arthlete
    Jul 13, 2020 at 20:34
-1

Call event.preventDefault() in your handler.

EDIT: I missed the part where he said his handler wasn't getting called, but that sounds like an isolated issue. onclick handlers do get called an I'm able to use preventDefault(): Example Playground

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.